Question

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

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



第1项--------------------- 1.第1项-----------------



第2项--------------------- 2.第2项-----------------



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

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

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



第1项--------------------- 1.第1项-----------------



第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>

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

2 个答案: