子要素にクラスがある場合は、リストを実行して項目を移動します。

Question

私は達成するのは簡単なはずだと思っていることをしようとしていますが、うまくいかないようです。

Googleのサイトの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'); 
    }); 
}); 

私は私のためにこの作品を作ることができる方法上の任意の提案ですか？私は助けていただきありがとうございます！我々は

を通じてそれがif声明

希望と一致した場合、これはあなたに

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

を助け最後に李を移動 $('ul.product-image-thumbs').find($(this)).appendTo('ul.product-image-thumbs');この行をループしている liの linkを見つける

Answer 1

使用$(this).find("a")