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

Question

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

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

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

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

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

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

---DIV B------------------DIV 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 的children 集合的长度，并按此排序。然后用已排序的内容替换当前未排序的内容。为此，您可以使用.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>