jQueryでnth-childを正しく使用して型のオブジェクトをステップ実行するにはどうすればよいですか？

Question

jQueryのnth-child選択構文に固有のような奇妙なバグが発生しました。 $('list').each()を使用して、以下のHTMLのリストのみをステップ実行することができます。ただし、nth-child選択句を使用すると、2つのlistブロックの間に<br />タグが含まれているようです。

<list id="c" view="vw_project_content" where="`project` = %%2%%"> 
    <item> 
     <b>$$title$$</b><br /> 
     $$message$$ 
     <br /> 
    </item> 
</list> 
<br /> 
Discussion: 
<list id="p" view="vw_project_posts" where="`project` = %%2%%" limit="100"> 
    <item> 
     <b>$$poster_id$$</b><br /> 
     $$message$$ 
     <br /> 
    </item> 
</list> 

し、次のコード：HTMLの場合

console.log($('list:nth-child(1)')); 
console.log($('list:nth-child(2)')); 
console.log($('list:nth-child(3)')); 

私は出力を受け取る：

[list#c, prevObject: jQuery.fn.init(1)] 
[prevObject: jQuery.fn.init(1)] 
[list#p, prevObject: jQuery.fn.init(1)] 

しかし、私は2つのlist間<br />を削除する場合ブロック：

[list#c, prevObject: jQuery.fn.init(1)] 
[list#p, prevObject: jQuery.fn.init(1)] 
[prevObject: jQuery.fn.init(1)] 

対象ブロックの間に存在するものを知らなくても、確実に特定のタイプのnth-childを選択するための適切な方法はありますか？

Answer 1

これらの結果が表示される理由は、nth-child（）セレクタが動作する方法のためです。あなたのコード例では、$('list:nth-child(2)')を取得しようとしているときに、その要素の親要素の2番目の子であるlist要素です。あなたのHTMLの中ではその親の最初の子であり、list#pはその親の3番目の子です。そのため、<br />タグが存在する場合、$('list:nth-child(2)')の空の応答が返されます。

あなたがしようとしているのは、list要素のグループ内の特定の位置を取得する場合は、代わりにeq()セレクタを使用してみることができます。例：

注：eq（）セレクタは、1インデックスの代わりに0インデックス付きです。

console.log($('list:eq(0)')); 
console.log($('list:eq(1)'));