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

Question

I am trying to do something that I think should be simple enough to accomplish, but it's not seeming to work out for me.

I just want to run through the list of thumbnails on our site's alt images, and then if it has a child link with the class video-thumbnail, remove it and add to the end of the list. The reason I am going about it this way is because it is for an A/B test, so I have to modify the page without redoing how it feeds in data to prove it is the correct move before actually making the change on the site. Some products have 2 videos to accomodate a "curvy fit" video as well and some dont have videos otherwise i could just move the first list item to the end. 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');
    });
});

Any suggestions on how I could make this work for me? I appreciate any help!

Answer 1

Use $(this).find("a") to find the link of the li we are looping through

This line $('ul.product-image-thumbs').find($(this)).appendTo('ul.product-image-thumbs'); moves the li to the end if it match the if statement

Hope this helps you

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