如何计算两个div中的项目数并按升序重新排列它们

Question

所以，我想重新排列两个div，其中有一些项目在div的数字结构中是动态的，如下所示：

---A区------------------------------B区---------------

项目 1

1. --------------------- 1. 项目 1-----------------

2. 项目2---------------------2。 项目2-----------------

3. 项目3-------------------------------------------------

所以现在我想数一数。 来自div 的项目，然后如果 DIV A 的项目多于 DIV B 结果应该如下所示： 因此，我想重新排列到div，其中将有一些项目在div 的数字结构中是动态的，如下所示：

---B区------------------------------A区---------------

项目 1

1. --------------------- 1. 项目 1-----------------

2. 项目2---------------------2。 项目2-----------------

   -------------------------------3. 第 3 项------------------

我试着像下面这样数：

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>

您缺少的主要内容是将排序顺序重新应用于 DOM，并且无需设置新数组，您可以使用元素引用。

Answer 2

你需要获取每个div的子集合的长度，并按此排序。然后将当前未排序的内容替换为已排序的内容。为此，您可以使用.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>