jQuery how to loop nth-child

Question

I have several divs in two separate containing divs, the order of the first div changes on every page load, and i need to append the second list to the first in order.

<div id="one">
    <div><p>Sample text 1</p></div>
    <div><p>Sample text 2</p></div>
    <div><p>Sample text 3</p></div>
    <div><p>Sample text 4</p></div>
</div>
<div id="two">
    <div><p>Sample text 5</p></div>
    <div><p>Sample text 6</p></div>
    <div><p>Sample text 7</p></div>
    <div><p>Sample text 8</p></div>
</div>

i can do the first one no problem, but how do I loop this increasing n by 1 each loop.

$(document).ready(function($) {
    $("#two div:first-child").appendTo("#one div:nth-child(n)");
});

EDIT: Sorry i havent explained very well, this is the output i am after

<div id="one">
    <div><p>Sample text 4</p>
        <div><p>Sample text 5</p></div>
    </div>
    <div><p>Sample text 2</p>
        <div><p>Sample text 6</p></div>
    </div>
    <div><p>Sample text 3</p>
        <div><p>Sample text 7</p></div>
    </div>
    <div><p>Sample text 1</p>
        <div><p>Sample text 8</p></div>
    </div>
</div>
<div id="two">
</div>

So each div from the second group is placed inside each div from the first group, the first group is randomly jumbled up, and i need to append the second set of divs in their original order...im sorry, my describing is less than perfect!

In your code are you trying to append the first child of `two` to every child of `one`? i.e. after each div in `one` the first element of `two` will be seen? — Nunners, Nov 06 '13 at 16:43
@Nunners yes that is what i am after, but as the first child of two has been appended, the second child becomes the first and so on etc. — Tim Wilkinson, Nov 06 '13 at 16:49

score 2 · Answer 1 · answered Nov 06 '13 at 16:40

2

Try

$(document).ready(function($) {
    $("#two > div").appendTo("#one");
});

Demo: Fiddle

answered Nov 06 '13 at 16:40

Arun P Johny

384,651
66
527
531

score 1 · Accepted Answer · edited May 23 '17 at 12:03

So each div from the second group is placed inside each div from the first group, the first group is randomly jumbled up, and i need to append the second set of divs in their original order...im sorry, my describing is less than perfect!

Whoa, that's confusing!

First, let's sort the right order to do it in.

Shuffle the divs in #one
Put the elements from #two into the appropriate position in #one

First, the shuffling. I'm going to use the function from this answer on shuffling a Javascript array.

var one = $('#one'),
    divs = shuffle($('#one div').get()); // array of divs and shuffle it

$.each(divs, function() {
    one.append(this);    // take each element from where it currently is and put
                         // it at the end of #one
});

So we have our elements in a random order. Now, to move the elements from #two into a corresponding position in #one...

$('#two div').each(function(idx) { // take each div in #two
                                   // idx is its position among the elements in #two 
    $('#one > div').eq(idx).append(this); // put the element in the div in #one
                                          // that is in the same position
});

jsFiddle

i got as far as the jumbling up part, but your version is so much simpler and works a treat! thank you so much! — Tim Wilkinson, Nov 07 '13 at 09:28

wirey00 · Answer 3 · 2013-11-06T17:00:09.827

0

You can do something like this using .each(function()

$('#one div').each(function(i,v){
   $('#two div').eq(i).appendTo(this); 
});

FIDDLE

Or using .append(function()

$('#one div').append(function(i,v){
   return $('#two div').eq(i);
});

FIDDLE

edited Nov 06 '13 at 17:00

answered Nov 06 '13 at 16:51

wirey00

33,517
7
54
65

jQuery how to loop nth-child

3 Answers3