运行通过 List，如果子元素有 class，则将项目移动到末尾

Question

我正在尝试做一些我认为应该很容易完成的事情，但它似乎对我来说并不奏效。

我只想运行查看我们网站替代图片的缩略图列表，然后如果它有子 link 和 class 视频缩略图，请将其删除并添加到列表的末尾。我这样做的原因是因为它是为了 A/B 测试，所以我必须修改页面而不重做它如何输入数据以证明它是正确的移动，然后再实际进行更改地点。有些产品有 2 个视频来容纳一个 "curvy fit" 视频，有些产品没有视频，否则我可以将第一个列表项移到最后。 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 语句

，则将 li 移动到末尾

希望对你有帮助

$('.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>

运行通过 List，如果子元素有 class，则将项目移动到末尾

Run through List and move items to end if child element has a class

html

jquery

optimizely

运行 通过 List，如果子元素有 class，则将项目移动到末尾

Run through List and move items to end if child element has a class

html

jquery

optimizely

运行通过 List，如果子元素有 class，则将项目移动到末尾