jQueryで特定の子要素のn番目ごとにどのように選択するのですか？

Question

私はこのマークアップを持っている：

<div id="container"> 

    <h1>Heading</h1> 

    <p>Some text</p> 

    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <!-- ... same thing on down the page ... --> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 

</div> 

私はすべて第四のdivにクラスを追加したいと思います。ここではjQueryのは、私が働くだろうと予想ことだ：

$('div.foo:nth-child(4n)').addClass('bar'); 

しかし、それは、その結果：だから

<div id="container"> 

    <h1>Heading</h1> 

    <p>Some text</p> 

    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 

</div> <!-- #container --> 

、明らかにすべて子供たちがカウントされ、そして唯一のマッチした要素は、クラスが追加されます。私はちょうどそれらの他の2つの要素を考慮に入れて、:nth-child(4n+2)を使用することができますが、私はいつも正確に私のdivの前に正確に2つの要素があると思うことはできません。

カウントするときに特定の要素だけを考慮するn番目の子のようなセレクタ（またはメソッド）がありますか？

Answer 1

あなたは次のようにすべての4番目の要素を取得するにはフィルタ機能を使用することができます。

$('div.foo').filter(function(index){ 
return (index%4 == 3); 
}).addClass('bar'); 

の作業例：@

http://jsfiddle.net/wCxSv/

Answer 2

あなたは常にそれを自分で行うことができます：

を

$('div.foo').each(function(i) { 
    if(i % 4 != 3) 
    return 
    $(this).addClass('bar') 
}) 

Answer 3

http://api.jquery.com/filter/#using-filter-function 偉大なチュートリアル。フィルター使用時。

モジュラス演算子（％）を各またはフィルタと組み合わせて使用​​して要素を反復処理し、モジュラスが余りを返さない場合のみアクションを適用することです（反復のインデックスは、これは、多くの状況において一般的なプラクティスです。 また、各機能に類似した機能を実行することもできます。

$('div.foo').each(function(index) { 
    if((index+1)%4 == 0){ 
    $(this).addClass('bar'); 
}); 

Answer 4

jQuery 1.9+ :nth-of-typeがここで動作します。

$（ 'div.foo:nth-of-type(4n)').addClass('bar'）;

参考：A good description of :nth-of-type vs :nth-child