jquery - jQuery如何循环nth-child

Question

我在两个单独的包含 div 中有几个 div，第一个 div 的顺序在每次页面加载时都会更改，我需要按顺序将第二个列表附加到第一个列表。

<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>

我可以做第一个没问题，但是我如何循环这个每个循环将 n 增加 1。

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

编辑：对不起，我没有很好地解释，这是我所追求的输出

<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>

所以第二组的每个 div 都放在第一组的每个 div 内，第一组随机混杂，我需要按原始顺序附加第二组 div ......对不起，我的描述小于完美的！

Answer 1

尝试

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

演示：小提琴

Answer 2

所以第二组的每个 div 都放在第一组的每个 div 内，第一组随机混杂，我需要按原始顺序附加第二组 div ......对不起，我的描述小于完美的！

哇，这很混乱！

首先，让我们按正确的顺序进行排序。

1. div将s洗牌#one
2. 将元素 from#two放入适当的位置#one

首先，洗牌。我将使用这个答案中的函数对 Javascript 数组进行洗牌。

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
});

所以我们的元素是随机顺序的。现在，要将元素从...#two中的相应位置移动#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

Answer 3

您可以使用.each(function()

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

FIDDLE

或使用.append(function()

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

FIDDLE