jQueryを使ってみよう その3

jQueryのノード取得についての続きです。まずはとんでもない勘違いのままエントリーしてしまった前回の最後の項目の説明から始めたいと思います。

以下のようなDOMがあるとします。

<div>
	<p>段落A1</p>
	<p>段落A2</p>
	<p>段落A3</p>
</div>

<div>
	<p>段落B1</p>
	<p>段落B2</p>
	<p>段落B3</p>
</div>

<div>
	<h2>見出しC1</h2>
	<ul>
		<li>項目C1</li>
		<li>項目C2</li>
	</ul>
	<p>段落C1</p>
	<p>段落C2</p>
	<p>段落C3</p>
</div>

4. $('p:nth-child(2)') 【2番目の子要素であるすべてのpを取得】
[取得できる要素]

<p>段落A2</p>
<p>段落B2</p>

[コメント]
ここでは<p>段落C2</p>が取得されない点が最大のポイントです。僕はてっきり「ある親要素に含まれるp要素の中から2番目のものを全て取得する」ものかと勘違いしていたのですが、そうではありません。取得されるのは「ある親要素に含まれる2番目の子要素で、かつそれがp要素の場合」です。
3番目の<div>ブロックに着目してみると、ここでは2番目の子要素は<ul>ですので、<p>段落C2</p>は取得されません。

5. $('p:first-child') 【最初の子要素であるすべてのpを取得】
[取得できる要素]

<p>段落A1</p>
<p>段落B1</p>

[コメント]
これは$('p:nth-child(1)')と同じです。「最初の子要素で、かつそれがp要素の場合」取得されます。「全てのp要素の中の最初のp要素を取得」ではありません。

6. $('p:last-child') 【最後の子要素であるすべてのpを取得】
[取得できる要素]

<p>段落A3</p>
<p>段落B3</p>
<p>段落C3</p>

[コメント]
「最初最後の子要素で、かつそれがp要素の場合」取得されます。くどいようですが「全てのp要素の中の最後のp要素を取得」ではありませんのでご注意を。