Javascript:根据具有类的子元素中的值对列表进行排序

Question

我有一个无序列表。我使用下面的方法对其进行排序，该方法工作正常:

sortList(document.getElementsByClassName('list')[0]);

function sortList(ul){
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}

这在格式如下的列表上可以正常工作:

<ul class="list">
    <li>3</li>
    <li>7</li>
    <li>6</li>
    <li>3</li>
</ul>

但是，我尝试根据具有类的子元素中包含的值对列表进行排序，如下所示:

<ul class="list">
<li>
    <div class="stuff etc">
        Stuff
    </div>
    <span class="_5n6h">0</span>
</li>
<li>
    <div class="stuff etc">
        Stuff
    </div>
    <span class="_5n6h">7</span>
</li>
<li>
    <div class="stuff etc">
        Stuff
    </div>
    <span class="_5n6h">4</span>
</li>
<li>
    <div class="stuff etc">
        Stuff
    </div>
    <span class="_5n6h">3</span>
</li>

我想根据类 _5n6h 的 span 元素中的值对列表项进行排序。

如何定位该值来对列表项进行排序？

预先感谢您的帮助。

Answer 1

sortList(document.getElementsByClassName('list')[0]);

function sortList(ul){
   const allItems = ul.getElementsByTagName('li');
   const sortedItems = Array.from(allItems).sort((a, b) => {
      a = Number(a.getElementsByTagName('span')[0].innerText);
      b = Number(b.getElementsByTagName('span')[0].innerText);
      return (a < b) ? -1 : (a > b) ? 1 : 0;
   });
   ul.append(sortedItems[0]);
}

<ul class="list">
  <li>
      <div class="stuff etc">
          Stuff
      </div>
      <span class="_5n6h">0</span>
  </li>
  <li>
      <div class="stuff etc">
          Stuff
      </div>
      <span class="_5n6h">7</span>
  </li>
  <li>
      <div class="stuff etc">
          Stuff
      </div>
      <span class="_5n6h">4</span>
  </li>
  <li>
      <div class="stuff etc">
          Stuff
      </div>
      <span class="_5n6h">3</span>
  </li>
</ul>

这将完成对列表 desc 的排序。 您只需使用 Array.sort()，通过覆盖排序方法中的 a、b 参数即可实现此目的。