Question

我将所有.dataCard类的元素分为左右列，它们是主容器的子元素。因此.dataCard元素是#main的孙子。

我正在尝试从左列到右列，从每列中取出第一个孩子，然后将其转移到#main，然后将其从列中删除;因此，使它成为#main而不是孙子的孩子。

这是我尝试过的，但是当我运行它时，我得到一个空的`#main'：

$('.dataCard').each(function(){
    $('#main').append($('#left').first());
    $('#left').first().remove();
    $('#main').append($('#right').first());
    $('#right').first().remove();
});

我也试过这个，但我理解为什么这也会导致空#main，因为它在写#main的html时会清除#main因为那时没有任何内容现在参考#left和#right已经消失。

$('.dataCard').each(function(){
    $('#main').html($('#left').first());
    $('#left').first().remove();
    $('#main').html($('#right').first());
    $('#right').first().remove();
});

如何将订单中的.dataCard元素，一列从左列，一列从右列转移到#main？

编辑：

我的标记：

<div id="main">
    <div id="left">
        <div class="dataCard" data-cardNumber="1">...</div>
        <div class="dataCard" data-cardNumber="3">...</div>
        <div class="dataCard" data-cardNumber="5">...</div>
    </div>
    <div id="right">
        <div class="dataCard" data-cardNumber="2">...</div>
        <div class="dataCard" data-cardNumber="4">...</div>
    </div>

Answer 1

Updated fiddle Demo

var x = $('#main .dataCard').sort(function (a, b) {
    return $(a).data('cardnumber') - $(b).data('cardnumber');//sort according to data-cardNumber attribute
}).appendTo('#main', function () { //append to div with id main
    $('#left,#right').remove();//remove div with id left and right
});

.sort()

.appendTo()

.remove()

<小时/> 以.append()第一个孩子为id，主要是

fiddle Demo

$('#main').append($('#left').find('.dataCard').first());
$('#main').append($('#right').find('.dataCard').first());

或.prepend()

fiddle Demo

$('#main').prepend($('#left').find('.dataCard').first());
$('#main').prepend($('#right').find('.dataCard').first());

转移孙子成为孩子

1 个答案: