0

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

我只想浏览我们网站的 alt 图像上的缩略图列表，然后如果它有一个带有类 video-thumbnail 的子链接，请将其删除并添加到列表的末尾。我这样做的原因是因为它是用于 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');
    });
});

关于如何使这项工作适合我的任何建议？我很感激任何帮助！

4

1 回答 1

2

用于$(this).find("a")查找我们正在循环link的li

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

于 2017-02-20T18:25:36.910 回答