DOMトラバースと新しい要素セットの取得

DOM のトラバースについて述べる。次のコードがあるとする。

<div>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
</div>

次に、:eq() インデックスカスタムセレクタを使って 2 つめの <li> 要素を選択する。 インデックスは 0 から始まることに注意する。

jQuery('li:eq(1)');

ここで、２つめの <li> を起点に移動することができる。

jQuery('li:eq(1)').next() // 3 つめの<li>を選択
jQuery('li:eq(1)').prev() // 1 つめの<li>を選択
jQuery('li:eq(1)').parent() // <ul>を選択
jQuery('li:eq(1)').parent().children()  // すべての<li>を選択
jQuery('li:eq(1)').nextAll() // 2つめの<li>のあとにある<li>すべてを選択
jQuery('li:eq(1)').prevAll() // 2つめの<li>のあとにある<li>すべてを選択

まりんきょ学問所 ＞ コンピュータの部屋 ＞ jQuery 手習い ＞ DOMトラバースと新しい要素セットの取得