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（$(selector, context)与$(context).find(selector)相同）。查询返回空集合，随后attr返回undefined值。 undefined > undefined和undefined < undefined都返回false。 sort回调始终返回0，这使订单保持不变。

Answer 2

请查看使用您的数据降序排序的示例。关于算法的描述，array sorting有一个很好的答案。

您使用的三元运算符(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作为它们的两个元素时   参数。

如果返回的结果不一致，则排序顺序未定义

如果vA > vB // true将a排序为低于b的索引

因此，如果vA < vB // true保持a和b不变。这是一个逻辑错误。

＆＃13;

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

＆＃13;

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

＆＃13;

通过元素迭代对孩子进行排序

2 个答案: