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

你可能会改造lis转换为数组,这样你就可以简明阵列的方法,如操纵它们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>

如果您不想完全删除未传递的lis,则更改其样式而不是调用.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>