Javascript: упорядочение списка по содержанию span в пределах li

Question

Итак, у меня есть следующий список, в котором я хочу сделать следующее:

1. Скрыть li , если у этого человека 0 сообщений.
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>

Мне удалось выполнить пункты 1 и 3, используя приведенный ниже JavaScript:

(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 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>