comment compter le nombre d'éléments dans deux div et les réorganiser dans l'ordre croissant

Question

Alors, je veux réorganiser deux DIV qui auront quelques éléments de la qui sont dynamiques dans la structure numérique de la div sera la suivante:

--- DIV DIV ------------------------------ DIV B ---------- -----

1. article 1 --------------------- 1. article 1 ----------- ------

2. item 2 --------------------- 2. item 2 ------------ - ---

3. item 3 ---------------------------------------- ---------

Alors maintenant, je veux compter pas. d'articles de div et puis si, comme par exemple, DIV A a plus d'objet que DIV B les résultats devraient ressembler à: Donc, je veux réorganiser à div qui aura quelques éléments dans le qui sont dynamiques dans la structure numérique de la div sera comme suit:

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

1. article 1 --------------------- 1. article 1-- ---------------

2. article 2 --------------------- 2. article 2 --- --------------

   ------------------------------- 3. Point 3 ------------------

j'ai essayé de compter comme suit:

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>

La principale chose que vous manquez est de réappliquer l'ordre trié au DOM, et il n'est pas nécessaire d'installer un nouveau tableau, vous pouvez travailler avec des références d'éléments.

Answer 2

Vous devez obtenir la longueur des enfants collection de chaque div, et trier par cela. Remplacez ensuite le contenu actuel non trié par le contenu trié. Pour cela, vous pouvez utiliser .appendTo():

$('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>