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的代码是这里。

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>

​