如果子元素具有类,则运行List并将项目移动到结尾

时间:2017-02-20 18:20:44

标签: jquery html optimizely

我正在努力做一些我认为应该足够简单的事情,但它似乎并不适合我。

我只是想浏览我们网站上的缩略图列表的alt图像,然后如果它有类视频缩略图的子链接,请将其删除并添加到列表的末尾。我这样做的原因是因为它是用于A / B测试,所以我必须修改页面而不重做它如何输入数据以证明它是在网站上实际进行更改之前的正确移动。有些产品有2个视频,以适应'#34;曲线健美"视频以及一些没有视频,否则我可以将第一个列表项移动到最后。 的 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');
    });
});

关于如何让这项工作适合我的任何建议?我感谢任何帮助!

1 个答案:

答案 0 :(得分:2)

使用$(this).find("a")查找我们正在循环播放的link的{​​{1}}

如果符合li语句

,则此行$('ul.product-image-thumbs').find($(this)).appendTo('ul.product-image-thumbs');会将li移至末尾

希望这会对你有所帮助

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