转移孙辈成为孩子

Question

I have elements all of the .dataCard class divided into a left and right column, which are children of the main container. So the .dataCard elements are grandchildren of #main .

I'm trying to go from the left column to the right column and take the first child from each column and transfer it into #main then remove it from the column it came from; thus, making it a child of #main and not a grandchild.

Here is what I have tried, but when I run it, I get an empty `#main':

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

I've also tried this, but I understand why this also causes an empty #main because it clears the #main when it writes the html of #main because then there is nothing to reference as now the #left and #right are gone.

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

How can I transfer the .dataCard elements in the order, one from the left column, one from the right column, into #main ?

Edit:

My markup:

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

---

To .append() first child to div with id main

fiddle Demo

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

or .prepend()

fiddle Demo

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