webmanab.html

menu

選択した要素の整理／拡張／分割 -『jQuery』

　

ラップ集合のサイズを判定する

ラップ集合は、配列に似た方法で扱えます。ラップされた要素の数をふくむlengthプロパティは、JavaScriptの配列と同様に扱うことができます。

プロパティでなくjQueryのメソッドを使いたいとき、size()メソッドを利用します。これはlengthプロパティと同じ情報を返します。


$('#mugiwara-team').html('They are' + $('.mugiwara-member').size());

すべての.mugiwara-memberにマッチして、その要素の数を返しています。

「sizeメソッド」

size()
ラップ集合の中にある要素の数を返す
パラメータ
なし
戻り値
要素の数

ラップ集合内の要素の取得

要素を直接参照して、生のJavaScriptの操作を実行するときのメソッドやその他の方法があります。

インデックスを使った要素の取得

jQueryではラップ集合をJavaScriptの配列と同様に扱えるので、単純に配列のインデックスを使って位置を指定することで要素を取得できます。


var nami = $('.mugiwara-member')[2];

配列のインデックスではなくjQueryのメソッドを使いたい場合は、get()メソッドを利用します。

「getメソッド」

get(index)
ラップ集合のうちマッチした要素の１つまたはすべてを取得する。indexが空の場合は、ラップ集合のすべての要素がJavaScript配列として返される。indexが指定されていると、そのインデックスの要素を返す。
パラメータ index
(Number) 返したい要素のインデックス。
戻り値
１つのDOM要素か、DOM要素の配列。

var zoro = $('.mugiwara-member').get(1);

get()はパラメータに負のインデックスを指定できます。その場合はラップ集合の末尾からの相対位置になります。

get()メソッドは１つのDOM要素を返しますが、場合によっては要素そのものではなくjQueryらしく、特定の要素１つをふくむラップ集合を用意したいときがあります。それはセレクタフィルタに似たeq()メソッドを利用します。

「eqメソッド」

eq(index)
ラップ集合の中でインデックスされた要素を取得し、その要素だけをふくむ新しいラップ集合を返す。
パラメータ index
(Number) 返したい１つの要素のインデックス。getと同じく負のインデックスを指定すると末尾からの順となる。
戻り値
1個または、0個の要素をふくむラップ集合

ラップ集合にある最初と最後の要素取得するのには、簡単におこなえるようにfirst()メソッドとlast()メソッドが用意されています。

「firstメソッド」

first()
ラップ集合の中で最初の要素を取得し、その要素だけをふくむ新しいラップ集合を返す。元の集合が空の場合は、返す集合も空。
パラメータ
なし
戻り値
1個または、0個の要素をふくむラップ集合

「lastメソッド」

last()
ラップ集合の中で最後の要素を取得し、その要素だけをふくむ新しいラップ集合を返す。元の集合が空の場合は、返す集合も空。
パラメータ
なし
戻り値
1個または、0個の要素をふくむラップ集合

配列の要素の全取得

ラップ集合の全ての要素をDOM要素のJavaScript配列として取得したい場合は、toArray()メソッドを使います。

「toArrayメソッド」

toArray()
ラップ集合をDOM要素の配列として返す
パラメータ
なし
戻り値
ラップ集合内のDOM要素をJavaScript配列にしたもの

var mugiwaraTeam = $('.mugiwara-member').toArray();
var zoro = mugiwaraTeam[1];

要素のインデックス判定

インデックスの要素を返すget()メソッドの反対の動きとして、index()メソッドはラップ集合の中で要素のインデックスを判定するのに使えます。

「indexメソッド」

index(element)
ラップ集合の中で、指定した要素の集合におけるインデックスを返す。なければ「-１」を返す。
パラメータ
(Element / Selector) インデックスを知りたい要素への参照か、その要素を識別するためのセレクタ。諸略されると、ラップ集合の最初の要素をその兄弟の中から探す。
戻り値
渡された要素が、ラップ集合の中で見つかった位置のインデックス。見つからない場合は「-1」。

var zoro = $('#mugiwara-team').index('#zoro');
var nami = $('#nami').index();
// zoro = 1
// nami = 2

パラメータに指定した要素の、ラップ集合でのインデックスを知ることができ、index()のパラメータを省略することで、自分自身のインデックスを知ることができるので同じ値を取得するのに２通りの方法があります。

ラップされた要素の管理

jQueryにはラップした要素集合を追加したり、フィルタをかけて集合を縮小したい場合の、ラップ集合の管理を実現するメソッドがあります。

ラップ集合への要素の追加

既存のラップ集合に対して、要素を追加したい場合、例えば元の集合に対して何らかのメソッドを適用してから、要素を追加して処理を実行したいときに使えるのが、add()メソッドです。add()はセレクタをチェインすることで和集合をつくっていきます。add()の特性として重要なことは、元のラップ集合に単純に追加するのではなく新しくラップした集合を作ることです。元の集合を破壊せずにメソッドをチェインさせるので、後で戻るためのバックアップが生まれているというところがとても有能です。

「addメソッド」

add(expression, context)
ラップ集合のコピーを作り、expressionとcontextで指定した要素を新しい集合に追加する。セレクタ／HTML／DOM／DOM配列を渡すことができる。
パラメータ expression
(Selector / Element / Array) マッチした集合に何を追加するかを指定する。jQueryセレクタの場合はマッチした要素が集合に追加される。HTMLの場合は要素が作成され集合に追加される。DOM要素かDOM要素の配列の場合は、そのまま配列に追加される。
パラメータ context
(Selector / Elemnt / Array / jQuery) expressionでマッチさせる要素に範囲を与えるためのコンテクストを指定する。$()関数に渡せるものと同じもの。
戻り値
元のラップ集合をコピーして、指定した要素を追加した集合を返す。

ラップ集合からの要素の削除

ラップ集合への追加はadd()メソッドでしたが、反対に要素を削除する場合はnot()メソッドを使います。

「notメソッド」

add(expression)
ラップ集合のコピーを作り、expressionで指定した要素を削除する。
パラメータ expression
(Selector / Element / Array / Function) マッチした集合から何を削除するかを指定する。jQueryセレクタの場合はマッチした要素が集合から削除される。要素の参照か要素の配列の場合は、それらが削除される。関数の場合は、ラップ集合のそれぞれの要素をthisとして関数を処理し、呼び出しの結果tureが返された要素をラップ集合から削除する。
戻り値
元のラップ集合をコピーして、指定した要素を削除した集合を返す。

このnot()を使うことで、マッチした要素を除外することができますが、マッチした要素以外を削除したい場合は、filter()メソッドを使います。

「filterメソッド」

filter(expression)
ラップ集合のコピーを作り、expressionで指定した要素以外を削除する。
パラメータ expression
(Selector / Element / Array / Function) マッチした集合から何を削除するかを指定する。jQueryセレクタの場合はマッチした要素以外が集合から削除される。要素の参照か要素の配列の場合は、それら以外が削除される。関数の場合は、ラップ集合のそれぞれの要素をthisとして関数を処理し、呼び出しの結果falseが返された要素をラップ集合から削除する。
戻り値
元のラップ集合をコピーして、指定した要素以外を削除した集合を返す。

ラップ集合のサブセット化

ラップ集合から、集合内の要素の位置によって切り取ったサブセットを取得したい時、slice()メソッドを使います。

「sliceメソッド」

slice(begin, end)
マッチした集合内の部分を含む、新しいラップ集合をつくって返す。
パラメータ begin
(Number) 戻り値となるスライスに含めたい最初の要素の、0を奇数とする位置。
パラメータ end
(Number) 戻り値となるスライスに含めたくない最初の要素の、0を奇数とする位置。省略したらスライスは元の集合の最後まで含むラップ集合を返す。
戻り値
新しく一部を切り取り作成したラップ集合。
$('#mugiwara-team').slice(1,5); // ２番目から5番目まで
$('#mugiwara-team').slice(1,2); // ２番目のみ
$('#mugiwara-team').slice(5); // 6以降全部

サブセットの取得には:hasフィルタと同じように働く、has()メソッドが用意されています。

「hasメソッド」

has(test)
渡されたtestにマッチする子孫を持っている要素だけを門徒のラップ集合から抜き出して、新しいラップ集合をつくって返す。
パラメータ test
(Selector / Element) ラップ集合のすべての子孫に適用するセレクタ。セレクタにマッチした要素が戻り値のラップ集合に返される。
戻り値
結果のラップ集合。

ラップ集合の要素の変換

ラップ集合の要素に対して値を文字列として取得したりするのに変換を実行したいとき、map()メソッドを使います。ラップ集合から新しい配列を関数によって作成するイメージです。

「mapメソッド」

map(callback)
ラップ集合の各要素に、コールバック関数を呼び出して戻り値を集めて、jQueryオブジェクトのインスタンスをつくる。
パラメータ callback
(Function) ラップ集合の各要素に呼び出すコールバック関数。この関数には２つのパラメータを渡す。function(index,element)集合における要素の０を基数とするインデックスと、関数のコンテクストthisが渡される。
戻り値
変換した値をラップした集合

戻り値はjQueryオブジェクトなので(配列ではないので)、get()でJavaScript配列に変換して出力します。


var mugiwaraTeam  = $('#mugiwara-team').map(function(index){ return $(this).text(); }).get();
alert(mugiwaraTeam);

ラップ集合の要素の走査

ラップ集合の要素を反復処理してフィルタリングして値を集めたり要素を変換するのにmap()を使いましたが、単純に反復の処理をしたいときにはeace()メソッドを使います。

「eachメソッド」

each(iterator)
マッチした集合の全部の要素を走査し、それぞれの要素に対して渡された反復処理するための関数iteratorを呼び出す。
パラメータ iterator
(Function) マッチした要素の各要素について呼び出される関数。この関数には２つのパラメータを渡す。function(index,element)集合における要素の０を基数とするインデックスと、関数のコンテクストthisが渡される。
戻り値
ラップ集合

$('.mugiwara-member').each(function(){
  this.title = 'I am' + this.id;
});

DOM要素の関係を元にしたラップ集合の取得

jQueryでは、既存のラップ集合から新しいラップ集合を取得するのに、ラップされた要素とDOMの他の要素との階層的な関係を利用することができます。

DOM要素の関係を利用して新しいラップ集合を取得するメソッドまとめ

結果のフィルタリングにselectorにパラメータとして渡すことができます。

children(selector)
子要素をすべて集めたラップ集合を返す。
closest(selector)
もっとも近い先祖で式にマッチするものをだけを含むラップ集合を返す。
next(selector)
次の兄弟要素をすべて集めたラップ集合を返す。
nextAll(selector)
次以降にある兄弟要素をすべて集めたラップ集合を返す。
nextUntil(selector)
次以降にある兄弟要素で、指定したセレクターや条件に一致する要素が出てくるまでをすべて集めたラップ集合を返す。セレクタが見つからない場合は次以降にある兄弟要素すべてを返す。
prev(selector)
直前の兄弟要素をすべて集めたラップ集合を返す。
prevAll(selector)
以前にある兄弟要素をすべて集めたラップ集合を返す。
prevUntil(selector)
以前にある兄弟要素で、指定したセレクターや条件に一致する要素が出てくるまでをすべて集めたラップ集合を返す。セレクタが見つからない場合は以前にある兄弟要素すべてを返す。
parent(selector)
直接の親をすべて集めたラップ集合を返す。
parents(selector)
すべての先祖を直接の親からルートに至るまでをすべて集めたラップ集合を返す。
parentsUntil(selector)
すべての先祖を指定したセレクターや条件に一致する要素が出てくるまでをすべて集めたラップ集合を返す。すべての先祖を直接の親からルートに至るまですべてを返す。
siblings(selector)
兄弟要素すべてを集めたラップ集合を返す。
contents()
ラップ集合の中にある要素の内容(テキスト)のラップ集合を返す。<iframe>とか取得するのに使う。
offsetParent()
ラップ集合の最初の要素に対して、相対か絶対値でもっとも近い親を含むラップ集合を返す。

ラップ集合に使える便利なメソッド

ラップ集合に使えるメソッドの中で便利で有能なものがfind()メソッドです。

「findメソッド」

find(selector)
ラップ集合の要素の子孫で、渡された式にマッチするすべての要素を含むラップ集合を返す。
パラメータ selector
(String) このjQueryセレクタにマッチする要素だけが、戻り値の集合にはいる。
戻り値
新しく作られたラップ集合

ラップ集合の子孫要素を簡単に検索するのにfind()を利用しますが、与えられたセレクタにマッチする要素がラップ集合にあるかどうか、その有無を調べるのにis()メソッドを使います。真偽値を返し、あればtrueなければfalseを返します。

「isメソッド」

is(selector)
ラップ集合の要素のどれかが、渡されたセレクタにマッチするかどうかを判定する。
パラメータ selector
(String) ラップ集合の要素をテストするセレクタ。
戻り値
1つ以上の要素が渡されたセレクタにマッチすればtrueなければfalseを返す。

jQueryチェインの管理

jQueryのメソッドをチェインで繋げて処理をまとめることで、処理の連鎖を簡潔に表現でき、効率よく実行することができる。その際にラップ集合を操作して、新しいラップ集合を作成して処理を進めていくことがありますが、元のラップ集合に戻りたい時にend()メソッドを利用します。end()は１つ前のラップ集合をメソッドの値として返してくれるので、元の集合を再度処理したい時に有用です。

「endメソッド」

end()
jQueryメソッドチェインの中で、現在のラップ集合をバックアップして、１つ前に返されたラップ集合に戻す。
パラメータ
なし
戻り値
一つ前ラップ集合

jQueyのメソッドチェインの中で生成されたラップ集合はスタックに積まれているとイメージします。end()を呼び出すと、最後に積んだ１番上のラップ集合を受け取って以降のメソッドの対象となっていきます。ラップ集合の今のスタックと前のスタックをマージするのにandSelf()メソッドを利用します。

「andSelfメソッド」

andSelf()
メソッドチェインで、それ以前にラップされた２つの集合をマージする。
パラメータ
なし
戻り値
マージされたラップ集合。
選択した要素の整理／拡張／分割 -『jQuery』

share
ー

tag
ー

related
ー

tip