CODEWITHSUNDEEP
jqueryeach
user1824996
user1824996

Reputation: 259

jQuery .each() loop going wild

I have about 25 groups of div containers with its child container shares the same parent/child class name, also there is an empty div container for each group.

<div class="parent">
    <div class="child">
        child content1
    </div>
</div>
<div class="empty"></div>

<div class="parent">
    <div class="child">
        child content2
    </div>
</div>   
<div class="empty"></div>

.....

<div class="parent">
    <div class="child">
        child content25
    </div>
</div>  
<div class="empty"></div>

I want to append each "child" div element to the "empty" div container so it will look like:

<div class="parent">
    <div class="child">
        child content1
    </div>
</div>
<div class="empty">
    <div class="child">
        child content1
    </div>
</div>

<div class="parent">
    <div class="child">
        child content2
    </div>
</div>
<div class="empty">
    <div class="child">
        child content2
    </div>
</div>

....

<div class="parent">
    <div class="child">
        child content25
    </div>
</div>
<div class="empty">
    <div class="child">
        child content25
    </div>
</div>

I used following code:

$('.parent').each(function(){    
    $(this).find('div').appendTo('.empty');
});

But the result shows the "child" div element & its content got looped to the "empty" div 25 times for each group, that's 25x25=625 new "child" divs! It's going wild!!!!!!!!!!!!

Can someone help?!

Upvotes: 1

Views: 91

Answers (2)

Hacknightly
Hacknightly

Reputation: 5144

Might it perhaps work better with .next()?

$('.parent').each(function(){   
       var parent = $(this);
       var child = parent.children('.child');
       parent.next('.empty').append(child.clone());
});

Here's a fiddle after messing with the implementation a bit -> http://jsfiddle.net/g9G85/8/

Upvotes: 2

zbrunson
zbrunson

Reputation: 1757

This looks like what you want:

<div class="parent">
    <div class="child">
        child content1
    </div>
</div>
<div class="empty"></div>

<div class="parent">
    <div class="child">
        child content2
    </div>
</div>   
<div class="empty"></div>​

JS:

$('.parent').each(function() {
    var parent= $(this);
    var child = parent.children('.child');
    parent.next('.empty').append(child.clone());
});​

Upvotes: 0

Related Questions