如果子元素有一個類，則在列表中移動並移動項目

Question

我正在嘗試做一些我認爲應該足夠簡單的工作來完成，但這似乎並不適合我。

我只想在我們網站的alt圖片上瀏覽縮略圖列表，然後如果它與類視頻縮略圖有子鏈接，請將其刪除並添加到列表的末尾。我這樣做的原因是因爲它是用於A/B測試的，所以我必須修改頁面而不重做數據的饋送方式，以便在實際進行網站更改之前證明它是正確的移動。有些產品有兩個視頻可以容納一個「彎曲的合身」視頻，有些沒有視頻，否則我可以將第一個列表項移動到最後。 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")找到li我們正在循環的link通過

此行$('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>