Пропустить список и переместить элементы до конца, если дочерний элемент имеет класс

Question

Я пытаюсь сделать что-то, что, по моему мнению, должно быть достаточно простым, но для меня это не похоже.

Я просто хочу просмотреть список миниатюр на изображениях нашего сайта, а затем, если у него есть дочерняя ссылка с миниатюрами видео класса, удалите его и добавьте в конец списка. Причина, по которой я это делаю, заключается в том, что это для теста A/B, поэтому мне нужно изменить страницу, не переделывая, как она передает данные, чтобы доказать, что это правильный ход, прежде чем делать изменения на сайте. В некоторых продуктах есть 2 видеоролика для размещения видео с «пышным положением», а у некоторых нет видеороликов, иначе я мог бы просто перенести первый элемент списка до конца. HTML

<ul class="product-image-thumbs"> 
<li> 
    <a href="#" class="video-thumbnail" data-video="#"> 
     <img src="#" alt="Product Video"> 
    </a> 
</li> 
<li> 
    <a href="#" class="video-thumbnail" data-video="#"> 
     <img src="#" alt="Product Video"> 
    </a> 
</li> 
<li> 
    <a class="thumb-link" href="#"> 
     <img src="#" > 
    </a> 
</li> 
<li> 
    <a class="thumb-link" href="#"> 
     <img src="#" > 
    </a> 
</li> 
<li> 
    <a class="thumb-link" href="#"> 
     <img src="#" > 
    </a> 
</li> 
<li> 
    <a class="thumb-link" href="#"> 
     <img src="#" > 
    </a> 
</li> 
<li> 
    <a class="thumb-link" href="#"> 
     <img src="#" > 
    </a> 
</li> 

</ul> 

JQuery

$('.product-image-thumbs li').each(function() { 
    if ($("a").hasClass("video-thumbnail")) { 
     ('li').appendTo('ul.product-image-thumbs'); 
    }); 
}); 

Любые предложения о том, как я мог бы сделать эту работу для меня? Я ценю любую помощь!

Answer 1

Использование $(this).find("a") найти link в li мы обхвата через

Эта линия $('ul.product-image-thumbs').find($(this)).appendTo('ul.product-image-thumbs'); перемещает литиево до конца, если он соответствовал if заявление

Надеюсь, это поможет вам

$('.product-image-thumbs li').each(function() { 
 
    if ($(this).find("a").hasClass("video-thumbnail")) { 
 
    $('ul.product-image-thumbs').find($(this)).appendTo('ul.product-image-thumbs'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="product-image-thumbs"> 
 
    <li> 
 
    <a href="#" class="video-thumbnail" data-video="#"> 
 
     <img src="#" alt="Product Video"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="video-thumbnail" data-video="#"> 
 
     <img src="#" alt="Product Video"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a class="thumb-link" href="#"> 
 
     <img src="#"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a class="thumb-link" href="#"> 
 
     <img src="#"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a class="thumb-link" href="#"> 
 
     <img src="#"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a class="thumb-link" href="#"> 
 
     <img src="#"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a class="thumb-link" href="#"> 
 
     <img src="#"> 
 
    </a> 
 
    </li> 
 

 
</ul>