wie in zwei div Anzahl der Elemente zählen und sie in aufsteigender Reihenfolge

Question

So neu ordnen, ich möchte zwei divs neu zu ordnen, die wie folgt wird in Nummer Struktur der div dynamisch sind haben einige Elemente in der die:

--- DIV A ------------------------------ DIV B ---------- -----

1. Artikel 1 --------------------- 1. Artikel 1 ----------- ------

2. Artikel 2 --------------------- 2. Artikel 2 ------------ - ---

3. Position 3 ---------------------------------------- ---------

So, jetzt will ich nicht zählen. der Elemente von beiden div und dann, wenn, wie in Beispiel DIV A mehr Element als DIV B Ergebnisse wie folgt aussehen sollte: Also möchte ich zu divs neu anordnen, die einige Elemente in der haben werden, die in der Zahlenstruktur der dynamisch sind div wird wie folgt sein:

--- DIV B ------------------------------ DIV A- --------------

1. Position 1 --------------------- 1. Position 1- ---------------

2. Artikel 2 --------------------- 2. Artikel 2 --- --------------

   ------------------------------- 3. 3 Artikel ------------------

Ich habe versucht, wie folgt zu zählen:

jQuery("div").each(function(){ 
var chk1 = jQuery("div.A").length; 
var chk2 = jQuery("div.B").length; 

var arr = [{"name" : "DIVA", "count" : chk1}, {"name" : "DIVB", "count" : chk2}]; 
arr.sort(function(a, b) { 
    return a.count - b.count; 
}); 
console.log(arr); 

}); 

Answer 1

var toSort = $(".sort").toArray(); 
 

 
toSort.sort(function(a,b){ 
 
    return a.children.length - b.children.length; 
 
}); 
 

 
toSort.forEach(function(div){ 
 
    $(document.body).append(div); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sort" style="color:green"> 
 
<p>1</p> 
 
<p>2</p> 
 
<p>3</p> 
 
</div> 
 

 
<div class="sort" style="color:red"> 
 
<p>1</p> 
 
</div> 
 

 
<div class="sort" style="color:orange"> 
 
<p>1</p> 
 
<p>2</p> 
 
</div>

Die Hauptsache, die Sie vermissen, besteht darin, die sortierte Reihenfolge wieder auf das DOM anzuwenden, und es ist nicht notwendig, ein neues Array zu erstellen, Sie können mit Elementreferenzen arbeiten.

Answer 2

Sie müssen die Länge der Kinder Sammlung von jedem div bekommen, und sortieren danach. Ersetzen Sie dann den aktuellen unsortierten Inhalt durch den sortierten Inhalt. Dafür können Sie .appendTo() verwenden:

$('button').click(function() { 
 
    $('div.A, div.B').sort(function (a, b) { 
 
     return $(a).children().length - $(b).children().length; 
 
    }).appendTo('#container'); 
 
});

.A, .B { 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    border: 1px solid; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="A"> 
 
     <div>1. item A.1</div> 
 
     <div>2. item A.2</div> 
 
     <div>3. item A.3</div> 
 
    </div><div class="B"> 
 
     <div>1. item B.1</div> 
 
     <div>2. item B.2</div> 
 
    </div> 
 
</div> 
 
<button>Order longest list to the right</button>