Javascript：按li内span的内容排序列表

Question

所以我有以下列表，我想在以下列表上执行以下操作：

1. 如果该人有0条帖子，请隐藏 li 。
2. 按帖子数对列表进行排序，所以最高的是第一位。
3. 然后仅显示列表中的前4个项目。

列表代码：

<div id="et_authors-3" class="widget et_pb_widget widget_et_authors">
    <div class="widget_content">
        <ul class="widget_list">
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Barry White</h3>
                    <span class="post-meta">1 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Bob Marley</h3>
                    <span class="post-meta">11 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Elton John</h3>
                    <span class="post-meta">4 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Stevie Wonder</h3>
                    <span class="post-meta">5 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Michael Jackson</h3>
                    <span class="post-meta">12 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Elvis Presley</h3>
                    <span class="post-meta">0 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Phil Collins</h3>
                    <span class="post-meta">0 Posts</span>
                </a>
            </li>
        </ul>
    </div>
</div>

我已经使用下面的JavaScript做到了第1点和第3点：

(function() {
    var toremove = []
  var authors = document.getElementById("et_authors-3");
  var ul = authors.getElementsByTagName("div")[0].getElementsByTagName("ul");
  var items = ul[0].getElementsByTagName("li");
  var count = 0;
  for (var i = 0; i < items.length; i++) {
    var author = items[i];
    var author_link = author.getElementsByTagName("a");
    var author_post_meta = author_link[0].getElementsByTagName("span");
    var posts_number = author_post_meta[0].innerHTML.split(" ")[0];
    if (posts_number <= 0) {
        items[i].style.display = "none";
    } else {
        ++count;
    }
    if (count > 4) {
        items[i].style.display = "none";
    }
  }
})();

但是我不太清楚如何根据帖子的数量进行排序。无法编辑HTML，因为我刚刚从WordPress小部件中提取了其中一个主题，因此我不想修改。

到目前为止，您可以看到1和2的代码是here

Answer 1

您可以将li转换为数组，因此可以使用filter，sort和slice这样的数组方法来简洁地操作它们：

const ul = document.querySelector('.widget_list');
const liToPostCount = li => Number(li.querySelector('span').textContent.match(/^\d+/));

const lis = [...ul.children];
const highestFour = lis
  .filter((li) => liToPostCount(li) > 0)
  .sort((a, b) => liToPostCount(b) - liToPostCount(a))
  .slice(0, 4);
lis.forEach(li => li.remove());
highestFour.forEach(li => ul.appendChild(li));

<div id="et_authors-3" class="widget et_pb_widget widget_et_authors">
  <div class="widget_content">
    <ul class="widget_list">
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Barry White</h3>
          <span class="post-meta">1 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Bob Marley</h3>
          <span class="post-meta">11 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Elton John</h3>
          <span class="post-meta">4 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Stevie Wonder</h3>
          <span class="post-meta">5 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Michael Jackson</h3>
          <span class="post-meta">12 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Elvis Presley</h3>
          <span class="post-meta">0 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Phil Collins</h3>
          <span class="post-meta">0 Posts</span>
        </a>
      </li>
    </ul>
  </div>
</div>

如果您不想完全删除不合格的li，请更改其样式，而不要调用.remove()：

const ul = document.querySelector('.widget_list');
const liToPostCount = li => Number(li.querySelector('span').textContent.match(/^\d+/));

const lis = [...ul.children];
lis.forEach((li) => li.style.display = 'none');
const highestFour = lis
  .filter((li) => liToPostCount(li) > 0)
  .sort((a, b) => liToPostCount(b) - liToPostCount(a))
  .slice(0, 4);
highestFour.forEach((li) => {
  li.style.display = 'block';
  ul.appendChild(li);
});

<div id="et_authors-3" class="widget et_pb_widget widget_et_authors">
  <div class="widget_content">
    <ul class="widget_list">
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Barry White</h3>
          <span class="post-meta">1 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Bob Marley</h3>
          <span class="post-meta">11 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Elton John</h3>
          <span class="post-meta">4 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Stevie Wonder</h3>
          <span class="post-meta">5 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Michael Jackson</h3>
          <span class="post-meta">12 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Elvis Presley</h3>
          <span class="post-meta">0 Posts</span>
        </a>
      </li>
      <li>
        <a href="https://example.com" class="widget_list_author">
          <h3 class="title">Phil Collins</h3>
          <span class="post-meta">0 Posts</span>
        </a>
      </li>
    </ul>
  </div>
</div>