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 s 放入一个数组中，因此您可以使用 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 s，然后改变他们的风格而不是调用 .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>