하위 요소에 클래스가있는 경우 목록을 실행하고 항목을 끝까지 이동하십시오.

Question

수행하기에 충분히 단순해야한다고 생각하는 것이 있지만이를 해결하지 못하는 것 같습니다.

사이트의 alt 이미지에있는 축소판 목록을 실행하고 싶습니다. 클래스 video-thumbnail과 하위 링크가 있으면 제거하고 목록의 끝에 추가하십시오. 이 방법은 내가 A/B 테스트를 수행하기 때문에 그 이유는 실제로 사이트에서 변경하기 전에 정확한 이동임을 증명하기 위해 데이터를 다시 공급하지 않고 페이지를 수정해야하기 때문입니다. 일부 제품에는 "curvy fit"비디오를 수용 할 수있는 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'); 
    }); 
}); 

? 어떤 도움을 주셔서 감사합니다!

Answer 1

사용 $(this).find("a")는이 당신에게

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

을하는 데 도움이 if 문

희망을 일치하는 경우

끝으로 리를 이동 $('ul.product-image-thumbs').find($(this)).appendTo('ul.product-image-thumbs');이 라인을 통해 li 우리가 루핑의 link을 찾을 수