Javascript 转孙为子

我将

.dataCard

类的所有元素分为左列和右列，它们是主容器的子级。因此，

.dataCard

元素是

#main

的子元素

我试着从左栏转到右栏，从每栏中取出第一个子项，将其转移到

#main

中，然后将其从原来的栏中删除；因此，让它成为

#main

的孩子，而不是孙子

这是我尝试过的，但当我运行它时，会得到一个空的“main”：

我也尝试过这个，但我理解为什么这也会导致一个空的

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

...
...
...
...
...

---

---

到id为main的div的第一个子级

或

---

---

到id为main的div的第一个子级

或

---

@TusharGupta用我的标记更新了我的问题。@TusharGupta用我的标记更新了我的问题。我对这个演示感兴趣，但输出似乎没有按JS Fiddle排序：正确的输出应该是1,2,3,4,5（按排序顺序）。我现在遇到另一个

.html（）

编写不正确的问题。如果你能看一看，我将不胜感激。这里是我的问题：我对这个演示很感兴趣，但输出似乎没有按JS FIDLE排序：正确的输出应该是1,2,3,4,5，按排序顺序。我现在遇到另一个问题，

.html（）

编写不正确。如果你能看一看，我将不胜感激。我的问题是：

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

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

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

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