javascript - 遍历元素对它们的子元素进行排序

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值(value)。两者undefined > undefined和undefined < undefined返回false 。 sort回调总是返回 0这使得顺序保持不变。