遍歷元素對孩子進行排序

Question

我正在嘗試遍歷具有特定類的所有元素，以根據其值屬性對子級進行排序。 我需要對每個父元素分別對子元素進行排序。

HTML結構：

<ul class="parentClass">
   <li value="1">...</li>
   <li value="10">...</li> 
   <li value="8">...</li> 
</ul>
<ul class="parentClass">
   <li value="8">...</li>
   <li value="29">...</li> 
   <li value="5">...</li> 
</ul>

JS代碼：

function sortAll() {
    $(".parentClass").each(function() {
        var items = $(this).children("li").sort(function(a, b) {
        var vA = $("li", a).attr("value");
        var vB = $("li", b).attr("value");
        return (vA > vB) ? -1 : (vA > vB) ? 0 : 1;
        });
        $(this).append(items);
    });
}

我想要得到的是：

<ul class="parentClass">
   <li value="10">...</li>
   <li value="8">...</li> 
   <li value="1">...</li> 
</ul>
<ul class="parentClass">
   <li value="29">...</li>
   <li value="8">...</li> 
   <li value="5">...</li> 
</ul>

我想我對迭代有誤解。 您能幫我弄清楚我的錯誤嗎？

我還要讓您知道某些<li>元素可能具有相同的值。

解決方案：

function sortAll() {
        $(".parentClass").each(function() {
            var items = $(this).children("li").sort(function(a, b) {
            var vA = $(a).attr("value");
            var vB = $(b).attr("value");
            return (vA > vB) ? -1 : (vA > vB) ? 0 : 1;
            });
            $(this).append(items);
        });
    }

Answer 1

您應該使用$(a)和$(b)代替$("li", a)和$("li", b) 。 a和b表示li元素。 您嘗試查找li元素的后代li s（ $(selector, context)與$(context).find(selector) ）。 查詢返回空集合，隨后attr返回undefined值。 undefined > undefined和undefined < undefined返回false 。 sort回調始終返回0 ，使順序保持不變。

Answer 2

請看一下對數據進行降序排序的示例。 關於算法的描述，關於數組排序有一個很好的答案。

三元運算符(vA > vB) ? -1 : (vA > vB) ? 0 : 1 (vA > vB) ? -1 : (vA > vB) ? 0 : 1 您使用的(vA > vB) ? -1 : (vA > vB) ? 0 : 1行為異常，導致順序錯誤。

• 如果compareFunction（a，b）小於0，則將a排序到比b低的索引，即a在前。
• 如果compareFunction（a，b）返回0，則a和b彼此相對不變，但對所有不同元素進行排序。 注意：ECMAscript標准不保證此行為，因此並非所有瀏覽器（例如，至少可追溯到2003年的Mozilla版本）都遵守此規定。
• 如果compareFunction（a，b）大於0，則將b排序為比a更低的索引。 當給定一對特定的元素a和b作為其兩個參數時，compareFunction（a，b）必須始終返回相同的值。
• 如果返回不一致的結果，則排序順序不確定

如果vA > vB // true是，則將a排序為比b低的索引

因此，如果vA < vB // true ，則保持a和b不變。 這是一個邏輯錯誤。

 function sortAll() { // Define variables before loops. var $container, $itemsColl; $(".parentClass").each(function(key, value) { // <ul> tag $container = $(value); $itemsColl = $container.children("li"); // Sort and appendTo() <ul>. $itemsColl.sort(function(a, b) { // Inverted for descendant sorting. return $(b).attr('value') - $(a).attr('value'); }) .appendTo($container); }); } sortAll(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="parentClass"> <li value="1">1</li> <li value="10">10</li> <li value="8">8</li> </ul> <ul class="parentClass"> <li value="8">8</li> <li value="29">29</li> <li value="5">5</li> </ul>