遍历元素以对其子元素排序

Iterate through elements to sort their childrens

本文关键字：元素 排序 遍历      更新时间：2023-09-26

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

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行为怪异，导致顺序错误。

  • 如果compareFunction(a, b)小于0，将a排序到比b低的索引，即a优先。
  • 如果compareFunction(a, b)返回0，保持a和b相对于彼此不变，但相对于所有不同的排序元素。注意:ECMAscript标准不能保证这一点行为，因此不是所有的浏览器(例如Mozilla版本更新)至少回到2003年)尊重这一点。
  • 如果compareFunction(a, b)大于0，则将b排序到比a低的索引。compareFunction(a, b)必须始终返回相同的值当给定特定的一对元素a和b作为它的2参数。
  • 如果返回的结果不一致，则排序顺序未定义

如果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>

相关文章：