Найти элемент и переставить его в конец списка

Question

Всем доброго времени суток! Вопрос тупой, но и я тоже есть такая разметка вывода анонсов последних постов, сортируются по убыванию даты публикации.

<div class="posts-template posts-per-page">
<ul>
    <li class="post-item">
        <article class="post-26">
            <div class="entry-outer">
                <div class="entry-inner entry-thumbnail delete-this-block">
                    <div class="overlay-background">
                        <img src="imageurl" class="size-small" />                       
                    </div>
                            <a class="overlay-link" href="linkurl"></a>
                </div>
                <div class="entry-inner entry-content">
                    <h3 class="entry-title">
                    <a href="linkurl">linktext</a>
                    </h3>
                </div>
            </div>
        </article>
    </li>
    <li class="post-item">
        <article class="post-30">
            <div class="entry-outer">
                <div class="entry-inner entry-content">
                    <h3 class="entry-title">
                        <a href="linkurl">linktext</a>
                    </h3>
                </div>
            </div>
        </article>
    </li>
    <li class="post-item">
        <article class="post-28">
            <div class="entry-outer">
                <div class="entry-inner entry-thumbnail delete-this-block">
                    <div class="overlay-background">
                        <img src="imageurl" class="size-small" />                       
                    </div>
                            <a class="overlay-link" href="linkurl"></a>
                </div>
                <div class="entry-inner entry-content">
                    <h3 class="entry-title">
                    <a href="linkurl">linktext</a>
                    </h3>
                </div>
            </div>
        </article>
    </li>
    <li class="post-item">
        <article class="post-62">
            <div class="entry-outer">
                <div class="entry-inner entry-thumbnail delete-this-block">
                    <div class="overlay-background">
                        <img src="imageurl" class="size-small" />                       
                    </div>
                            <a class="overlay-link" href="linkurl"></a>
                </div>
                <div class="entry-inner entry-content">
                    <h3 class="entry-title">
                    <a href="linkurl">linktext</a>
                    </h3>
                </div>
            </div>
        </article>
    </li>
</ul>

Всего элементов в списке 10. Но есть пункты списка, которые не содержат thumbnail и их надо поставить в конец списка.

Поскольку вывод постов идет по убыванию даты. В прнципе тут не важна дата публикации , важно, чтобы элемент списка, который не имеет картинки анонса поста оказался в самом конце, кроме этого их (анонсов без изображений) может быть 3-4 штуки и все элементы списка, у которых нет изображения, надо поставить в конец списка.

Я так рассуждаю, что надо собрать массив

let imgno = Array.from(document.querySelectorAll('.post-item'));

из него каким-то образом выделить childNodes, которые не содержат img, а после осуществить перестановку. но видимо логика у меня совсем не верна и я в тупике

Как это можно реализовать на JS?

Answer 1

Реализовать можно так. Кнопку добавил для лучшей визуализации работы кода. Если нужно пояснение по поводу метода append - то он автоматически удаляет узел со старого места.

const button = document.querySelector("input[type='button']");

button.addEventListener("click", function(){
  const allPostsParent = document.querySelector(".posts-template ul"); // Находим элемент-родитель всех постов
  const allPosts = allPostsParent.querySelectorAll(".post-item"); // Получаем список всех постов
  allPosts.forEach((post) => {
    if (!post.querySelector('img')) { // Проверяем, есть ли у поста элемент-потомок img
      allPostsParent.append(post); // Если нет, то добавляем этот пост в конец всех постов
    }
  })
});

<div class="posts-template posts-per-page">
  <ul>
      <li class="post-item">
          <article class="post-15">
              <div class="entry-outer">
                  <div class="entry-inner entry-content">
                      <h3 class="entry-title">
                          <a href="linkurl">Без изображения</a>
                      </h3>
                  </div>
              </div>
          </article>
      </li>
      <li class="post-item">
          <article class="post-26">
              <div class="entry-outer">
                  <div class="entry-inner entry-thumbnail delete-this-block">
                      <div class="overlay-background">
                          <img src="imageurl" class="size-small" />                       
                      </div>
                              <a class="overlay-link" href="linkurl"></a>
                  </div>
                  <div class="entry-inner entry-content">
                      <h3 class="entry-title">
                      <a href="linkurl">С изображением</a>
                      </h3>
                  </div>
              </div>
          </article>
      </li>
      <li class="post-item">
          <article class="post-30">
              <div class="entry-outer">
                  <div class="entry-inner entry-content">
                      <h3 class="entry-title">
                          <a href="linkurl">Без изображения</a>
                      </h3>
                  </div>
              </div>
          </article>
      </li>
      <li class="post-item">
          <article class="post-28">
              <div class="entry-outer">
                  <div class="entry-inner entry-thumbnail delete-this-block">
                      <div class="overlay-background">
                          <img src="imageurl" class="size-small" />                       
                      </div>
                              <a class="overlay-link" href="linkurl"></a>
                  </div>
                  <div class="entry-inner entry-content">
                      <h3 class="entry-title">
                       <a href="linkurl">С изображением</a>
                      </h3>
                  </div>
              </div>
          </article>
      </li>
      <li class="post-item">
          <article class="post-62">
              <div class="entry-outer">
                  <div class="entry-inner entry-thumbnail delete-this-block">
                      <div class="overlay-background">
                          <img src="imageurl" class="size-small" />                       
                      </div>
                              <a class="overlay-link" href="linkurl"></a>
                  </div>
                  <div class="entry-inner entry-content">
                      <h3 class="entry-title">
                       <a href="linkurl">С изображением</a>
                      </h3>
                  </div>
              </div>
          </article>
      </li>
  </ul>
</div>
<input type="button" value="Сортировать">

БЛОГ НА HUSL

Найти элемент и переставить его в конец списка

Ответы (1 шт):