こちらではjQueryのメソッドのうち、Traversing(横断)に関するメソッドについて解説しています。
目次
jQueryのTraversing(横断)に関するメソッド一覧
メソッド | 解説 |
---|---|
.first() | 最初の要素に対象を絞る |
.last() | 最後の要素に対象を絞る |
.eq(index) | インデックスで指定した要素に対象を絞る |
.filter() | セレクターや関数に一致する要素に対象を絞る |
.not() | セレクターや関数に一致しない要素に対象を絞る |
.find(selector) | セレクターにマッチする子孫要素を取得 |
.prev([selector]) | 直前の兄弟要素を取得 |
.prevAll([selector]) | 前の全ての兄弟要素を取得 |
.next([selector]) | 直後の兄弟要素を取得 |
.nextAll([selector]) | 後の全ての兄弟要素を取得 |
.parent([selector]) | 直接の親要素を取得 |
.parents([selector]) | 先祖要素を取得 |
.children([selector]) | 直接の子要素を取得 |
.siblings([selector]) | 全ての兄弟要素を取得 |
.closest([selector]) | セレクターにマッチする最も近い先祖要素を取得 |
.end() | メソッドチェーンの1つ前の状態に戻す |
.addBack() | スタック上の前の要素のセットを、現在のセットに追加 |
.first()
選択した要素の集合から、最初の要素に対象を絞るメソッドです。
.first()の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
</ul>
上記のHTMLにおいて
$('li').first().css('color', 'red');
とすると「りんご」の文字が赤色になります。
もう1つ例を挙げます。先ほどと同じHTMLに対して
$('li').css('background-color', 'yellow').first().css('color', 'red');
のようにすると、「りんご」「みかん」「メロン」の背景が黄色になり、「りんご」の文字が赤色になります。
.last()
.first()は最初の要素に対象を絞るメソッドでしたが、.last()は最後の要素に対象を絞るメソッドです。
それ以外は.first()と同じです。
.eq(index)
選択した要素の集合から、指定したインデックスの要素に対象を絞るメソッドです。
指定するインデックスは0から始まります。
インデックスをマイナスの数値にすると、最後から数えたインデックスになります。
.eq(index)の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('li').eq(2).css('color', 'red');
とすると「メロン」の文字が赤色になります。
また同じHTMLにおいて
$('li').eq(-2).css('color', 'red');
とすると「ぶどう」の文字が赤色になります。
.filter()
選択した要素の集合から、セレクターや関数に一致した要素に対象を絞るメソッドです。
.filter()の引数としてセレクター、関数、DOM要素、jQueryオブジェクトを渡すことができます。
.filter(selector)の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('li' ).filter(':odd').css('color', 'red');
とすると「みかん」と「ぶどう」の文字が赤色になります。
.filter(function)の使い方
引数に関数を渡した場合の使い方を紹介します。
選択した各要素について、関数がtrue
を返す場合にその要素は含まれ、false
の場合は除外されます。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
上記のHTMLにおいて
$("li").filter(function(index) {
return index % 3 === 2;
}).css('color', 'red');
とすると「3」と「6」(2番目と5番目の<li>
)の文字が赤色になります。
.not()
選択した要素の集合から、セレクターや関数に一致しない要素に対象を絞るメソッドです。
.filter()と逆の働きをします。
.notの引数としてセレクター、関数、jQueryオブジェクトを渡すことができます。
.not()の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
</ul>
上記のHTMLにおいて
$('li' ).not(':first').css('color', 'red');
とすると「みかん」と「メロン」の文字が赤色になります。
.find(selector)
選択した要素の子孫要素から、セレクターにマッチする子孫要素を取得するメソッドです。
.find()の引数としてセレクター、DOM要素、jQueryオブジェクトを渡すことができます。
.find()の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('ul').find('.red').css('color', 'red');
とすると「りんご」の文字が赤色になります。
$('ul')
により<ul>
が選択され、find()
でその子孫要素にフィルターをかけ、クラスがred
の要素に絞り込んでいます。
.prev([selector])
選択している要素の直前の兄弟要素を取得します。
.prev([selector])の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('li.green').prev().css('color', 'red');
とすると「みかん」という文字列が赤色になります。
.prevAll([selector])
選択している要素の前にある全ての兄弟要素を取得します。
.prevAll([selector])の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('li.green').prevAll().css('color', 'red');
とすると「りんご」と「みかん」という文字列が赤色になります。
.next([selector])
選択している要素の直後の兄弟要素を取得します。
.next([selector])の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('li.green').next().css('color', 'red');
とすると「ぶどう」という文字列が赤色になります。
.nextAll([selector])
選択している要素の後ろにある全ての兄弟要素を取得します。
.nextAll([selector])の使い方
<ul>
<li class="red">りんご</li>
<li class="orange">みかん</li>
<li class="green">メロン</li>
<li class="grape">ぶどう</li>
<li class="strawberry">いちご</li>
</ul>
上記のHTMLにおいて
$('li.green').nextAll().css('color', 'red');
とすると「ぶどう」と「いちご」の文字列が赤色になります。
.parent([selector])
選択している要素の直接の親要素を取得します。
.parent([selector])の使い方
<ul>
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<ul>
<li id="item4">4</li>
<li id="item5">5</li>
<li id="item6">6</li>
<ul>
<li id="item7">7</li>
<li id="item8">8</li>
<li id="item9">9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#item4').parent().css('color', 'red');
とすると「4」「5」「6」「7」「8」「9」の文字が赤色になります。
.parents([selector])
選択している要素の全ての先祖要素を取得します。
.parents([selector])の使い方
<ul>
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<ul>
<li id="item4">4</li>
<li id="item5">5</li>
<li id="item6">6</li>
<ul>
<li id="item7">7</li>
<li id="item8">8</li>
<li id="item9">9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#item4').parents().css('color', 'red');
とすると「1」「2」「3」「4」「5」「6」「7」「8」「9」の文字が赤色になります。
.children([selector])
選択した要素の直接の子要素(1階層下の要素)を取得します。
.children([selector])の使い方
<ul id="level1">
<li>1</li>
<li>2</li>
<li>3</li>
<ul id="level2">
<li>4</li>
<li>5</li>
<li>6</li>
<ul id="level3">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#level2').children().css('color', 'red');
とすると「4」「5」「6」「7」「8」「9」の文字が赤色になります。
.siblings([selector])
選択した要素の全ての兄弟要素を取得します。
.siblings([selector])の使い方
<ul>
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<ul>
<li id="item4">4</li>
<li id="item5">5</li>
<li id="item6">6</li>
<ul>
<li id="item7">7</li>
<li id="item8">8</li>
<li id="item9">9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#item5').siblings().css('color', 'red');
とすると「4」「6」「7」「8」「9」の文字が赤色になります。
.closest([selector])
選択した要素の先祖要素から、セレクターにマッチする最も近い先祖要素を取得します。
.closest()の引数としてセレクター、jQueryオブジェクトを渡すことができます。
.closest([selector])の使い方
<ul>
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<ul>
<li id="item4">4</li>
<li id="item5">5</li>
<li id="item6">6</li>
<ul>
<li id="item7">7</li>
<li id="item8">8</li>
<li id="item9">9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#item4').closest('ul').css('color', 'red');
とすると「4」「5」「6」「7」「8」「9」の文字が赤色になります。
.end()
スタック上の1つ前の状態(メソッドチェーンの1つ前の状態)に戻ります。
.end()の使い方
<ul>
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<ul>
<li id="item4">4</li>
<li id="item5">5</li>
<li id="item6">6</li>
<ul>
<li id="item7">7</li>
<li id="item8">8</li>
<li id="item9">9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#item6').prev().css('color', 'red')
.prev().css('color', 'green')
.end().css('font-weight', 'bold');
とすると「4」の文字が赤色になり、「5」の文字が緑色の太字になります。
どのような動作をしているのか少し解説します。
まず$('#item6').prev().css('color', 'red')
で「5」の文字を赤色にします。
それから.prev().css('color', 'green')
で「4」の文字を緑色にします。
そして.end()
で1つ前の状態、つまり<li id="item5">5</li>
を選択している状態に戻り、.css('font-weight', 'bold')
で「5」の文字が太字になります。
.addBack()
スタック上の前の要素のセットを、現在のセットに追加します。
.addBack()の使い方
<ul>
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<ul>
<li id="item4">4</li>
<li id="item5">5</li>
<li id="item6">6</li>
<ul>
<li id="item7">7</li>
<li id="item8">8</li>
<li id="item9">9</li>
</ul>
</ul>
</ul>
上記のHTMLにおいて
$('#item6').prev().css('color', 'red')
.prev().css('color', 'green')
.addBack().css('font-weight', 'bold');
とすると「4」の文字が赤色の太字になり、「5」の文字が緑色の太字になります。
どのような動作をしているのか解説します。
まず$('#item6').prev().css('color', 'red')
で「5」の文字を赤色にします。
それから.prev().css('color', 'green')
で「4」の文字を緑色にします。この時点で<li id="item4">4</li>
が選択されています。
そして.addBack()
でスタック上の前の要素のセット(<li id="item5">5</li>
)を現在選択しているセットに加えます。
これにより<li id="item4">4</li>
と<li id="item5">5</li>
が選択された状態にななります。
そして.css('font-weight', 'bold');
で「4」と「5」の文字を太字にしています。