jquery-selectors - jQuery n 番目の子の混乱

Question

このページ: https://weargustin.com/store?filter=all

なぜこのセレクターの最初の要素は:

$('div.funded.product:nth-child(3n)')

の 2 番目の要素

$('div.funded.product')

?!

Answer 1

問題は、nth-child がすべての子をループし、それらをセレクターに対してテストすることです。セレクターを使用せず、一致するものをループします。PSL が述べたように、兄弟であるあなたが持っている他のアイテムはすべてを捨てています。

これを分解するフィドルの例を次に示します: http://jsfiddle.net/Ga5Jq/

<div>
        <p>test</p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
</div>


$(function() {
    alert($("div span:nth-child(3n)").html());
});

上記のコードは、2 番目のスパンが実際には一致するセレクター2の 3 番目の子であるため、アラートを出します。divspan

Answer 2

nth-of-typeそのタイプの 3 番目ごとに選択する必要がnth-childあると思いますdiv.funded.product。たとえば、div.product.fundingも同じ親の子として入ってきます。

$('div.funded.product:nth-of-type(3n+1)')

:nth-of-type を参照