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

演示：Fiddle

Answer 2

所以第二组中的每个div都放在第一组的每个div中，第一组随机混乱，我需要按原始顺序追加第二组div ...对不起，我的描述不太完美！

哇，那令人困惑！

首先，让我们按顺序排序。

随机播放div

#one

将#two中的元素放入#one

首先，洗牌。我将使用this answer中的函数来改组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

jQuery如何循环nth-child

3 个答案: