Search code examples
jquerycloneeach

Move title and append to next image


I'm trying to clone a title and append it to an image div. Here is the markup with the comment of where the title should go:

<div class="current">
<div class="project">
    <div class="col">
        <a class="projectitle" href="#">Title1</a>
    </div>

    <div class="thumb">
        <img src="image1.jpg">
        <!-- Clone title1 and move here -->
    </div>

</div>

<div class="project">
    <div class="col">
        <a class="projectitle" href="#">Title2</a>
    </div>

    <div class="thumb">
        <img src="image2.jpg">
        <!-- Clone title2 and move here -->
    </div>

</div>

This works but copies all the titles and appends them to all the divs

$( ".current .project .projectitle" ).each(function() {
$( this ).clone().appendTo($(".thumb"));
});

Not at all right but I'm trying to use jquery and the for each function

$( ".current .project" ).each(function() {
var ptitle = $(this)
$("ptitle .projectitle").clone().appendTo($("ptitle .thumb"));
});

Any help would be great


Solution

  • $(".current .project .projectitle").each(function() {
       var $this = $(this), $target = $this.parent().next();
       $this.clone().appendTo($target);
    });
    

    http://jsfiddle.net/C42T8/