遍历元素对孩子进行排序_JavaScript

我正在尝试遍历具有特定类的所有元素，以根据其值属性对子级进行排序。 我需要对每个父元素分别对子元素进行排序。

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);
        });
    }

您应该使用$(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 ，使顺序保持不变。

请看一下对数据进行降序排序的示例。 关于算法的描述，关于有一个很好的答案。

三元运算符(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>

遍历元素对孩子进行排序

问题描述

1楼

2楼