変数のn番目の子がliタグでいっぱいになる

Question

変数があります。これを$ listObjectsという名前にします。そのデータは、として

<li>Data Here 1</li> 
<li>Data Here 2</li> 
<li>Data Here 3</li> 
<li>Data Here 4</li> 

私は私が考えることができるあらゆる方法を試してみました....続き、リストタグのn番目の子を取得する方法を見つけることができません。これは可能ですか？基本的には、$ listObjects変数にnth-child（3n）を使用します。

上記の方法が不可能な場合は、$ listObjects変数はそうのように移入されている...

var $listObjects = $data.find('li[data-type=' + $filterType + ']'); 

は、そのラインにn番目の子（3N）を追加することは可能でしょうか？

Answer 1

使用filter：

セレクタと一致または機能のテストに合格するものにマッチした要素の集合を減らします。

だから、これはそれを行う必要があります。

$listObjects.filter(':nth-child(3n)') 

をあなたは、あなたがあなたの元findで:nth-childを含めることができない何かのために$listObjectsを必要としない場合：

$data.find('li[data-type=' + $filterType + ']:nth-child(3n)'); 

---

何が起こっているのかを明らかにする。このHTMLを考える：私たちは$('li[data-id]')を言うなら

<ul> 
    <li data-id="a">One</li> 
    <li>Two</li> 
    <li data-id="a">Three</li> 
    <li data-id="a">Four</li> 
    <li data-id="a">Five</li> 
    <li data-id="a">Six</li> 
    <li data-id="a">Seven</li> 
</ul> 

我々は明白な理由のために一つ、三、四、ファイブ、六、および七を取得します。

我々は$('li[data-id]').filter(':nth-child(3n)')を言うなら、あなたはおそらく四と七を取得するために期待しているとき、私たちは三と六を取得します。ここでは何が起きるのですか？ :nth-childセレクタが[data-id]と一致するものではなく、<ul>のすべての子に適用されています。詳細マニュアルから：

提供されたセレクタは各要素に対してテストされています。セレクタに一致するすべての要素が結果に含まれます。

だから、この動作は、それが少し混乱で、スペックは物事がどのように相互作用するかについて、より明確にすることができても、仕様と一致します。

我々は$('li[data-id]:nth-child(3n)')を言うならば、我々は（期待？）を取得四と七、すなわち$('li[data-id]')のすべての第三の要素。

そして最後に、我々はこの言うことができる：nth-childはCSSセレクタであり、したがって、したがって(i + 1)テスト機能では、1ベースのことを覚えておいてください

$.grep($('li[data-id]'), function(e, i) { return (i + 1) % 3 == 0 })); 

を。それで私たちはすべての3番目の要素を再び与えるでしょう4つと7つの。 $.grepはプレーンなDOM要素の配列を提供するので、jQueryのifiedバージョンの場合は$()にその配列をラップしたいと思うでしょう。

デモ：http://jsfiddle.net/fw4xr/

---

概要：filterはあなたが望むものではないかもしれませんが、元のセレクタに:nth-child(3n)を追加することは、おそらくです。または、$.grepを使用して、$listObjects配列のうち興味がある部分をつかむことができます。また、filterの動作はちょっと混乱します。