オブジェクトの走査

jQuery 「走査系のメソッド」要素が条件にマッチするかチェックする

対象となる要素集合のうち、１つでもis()で与えた引数の条件にマッチした場合、trueを返します。マッチしなければfalseを返します。他の走査系メソッドとは異なり、is()はjQueryオブジェクトを返さず、trueまたはfalseを返します。対象となるjQueryオブジェクトに対しては一切の変更を加えませんので、jQueryオブジェクトはそのままで要素を調べたいときに有効なメソッドです。3番目...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」前。次の要素を抽出する

選択された要素の、prev()は１つ前の要素を、next()は１つ後の要素を返します。書式.prev().next()$('p').prev()$('p').next()サンプル前後の要素を抽出して幅を変更する<html> <head> <meta charset="UTF-8"> <title>テストページ</title> <script src=" integrity="sha256-/JqT...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」最初・最後の要素を抽出する

選択された要素集合から、first()は最初の要素を、last()は最後の要素を返します。書式.first().last()$('p').first()$('p').last()サンプル最初・最後の要素を抽出する<body> <div class="main"> <div class="header"> <h1> サンプル </h1> </div> <div class="content"> <p...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」１つ前の状態のjQueryオブジェクトを結合する

以前は、.andSelf()メソッドが使われていましたが、jQuery1.8で非推奨化、3.0で廃止されました。代わりに、jQuery1.8で、.addBack()が追加されています。.addBack()は、.end()と同様に、メソッドチェーンで活用できるメソッドです。.addBack()が実行される直前の状態のjQueryオブジェクトと、さらに1つ前の状態のjQueryオブジェクトを、１つの要...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」 1つ前の状態のjQueryオブジェクトを返す

走査系のメソッドの多くは、jQueryオブジェクトをもとに、別の要素集合として新たなjQueryオブジェクトを生成します。jQueryでは、これを利用してメソッドを延々とつなげていく「メソッドチェーン手法」が使えます。しかし、場合によってはチェーンの途中でそれより前に実行されたメソッドの効果を取り消して、処理以前の状態のjQueryオブジェクトを利用したいケースがあります。.end()メソッドは、...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」テキストノードも含めて、要素の子ノードを抽出する

条件にマッチした要素から、テキストノードを含むすべての子ノードを抽出して返します。.children()メソッドに似ていますが、.children()は、結果にテキストノードを含みません。iframeを使ったサイトでは、.contents()メソッドは特に便利です。iframeとメインページが同一のドメインに属していれば、.contents()メソッドは、メインページからiframeに表示している...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」要素集合に要素を追加する

渡されたjQueryオブジェクトの要素集合に、引数から導かれる要素を追加し、新たなjQueryオブジェクトとして返します。引数はセレクタ、DOM要素、HTMLのいずれでも可能です。セレクタ、DOM要素を指定した場合、その条件がマッチする要素が、既存のjQueryオブジェクトに追加されます。このメソッドでは、要素はあくまでもjQueryオブジェクトに追加されるのであって、ドキュメントに追加されるわけ...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」最も近い「配置済み」の親要素を得る

マッチした要素の先祖から、「配置済み」つまりCSSのpositionプロパティがstatic以外（relative、absolute、fixed）の要素で最も近い位置にあるものを返します。アニメーションや要素の動的な配置を行うようなページで、便利なメソッドです。書式.offsetParent()$('p.myClass').offsetParent()サンプル特定の要素の先祖から配置済みの要素を探...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」条件にマッチする要素を子孫の階層から探索する

.find()は.children()と似たメソッドですが、.children()が直下の子要素だけを返すのに対し、.find()は子孫の階層すべてを対象として探索を行います。書式.find( セレクタ )$('li').find('li')サンプル要素の子孫から、特定のクラス指定を持つ要素だけ見つける<body> <div class="main"> <div class="header"> <...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」最も近くの条件にマッチする親要素を得る

1つ目の書式では、探索条件にマッチした起点となる要素から、最も近くにあり、かつセレクタの条件にマッチする要素をjQueryオブジェクトとして返します。.parents()と似ていますが、.parents()が探索を1つ上の親要素から開始するのに対し、.closest()はマッチした要素自身から開始します。よって、セレクタの条件によっては、.closest()はマッチした要素自身を返す場合があります...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」要素の前・後の兄弟要素を範囲を限定して抽出する

.prevall()や.nextAll()と同様に、与えられたjQueryオブジェクトの要素に対し、.prevUntil()は前、.nextUntil()は後ろの兄弟要素を取得します。ただし、異なるのは探索の停止条件をセレクタと指定できることです。結果に含まれるのは、探索停止条件のセレクタにマッチした要素の直前までです。停止条件にマッチした要素そのものは、結果に含まれません。停止条件のセレクタが省...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」要素の前・後の兄弟要素をすべて抽出する

与えられたjQueryオブジェクトの要素に対し、.prevAll()は前、.nextAll()は後ろの兄弟要素をすべて取得します。引数としてセレクタを指定すれば、結果をさらに絞り込めます。書式.prevAll().nextAll()$('li.three').prevAll()$('li.three').nextAll()サンプル前・後のすべての兄弟要素の背景色を設定する <body> <div ...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」条件にマッチした要素の親要素を、範囲を限定して抽出する

.parent()と同様に、要素の親要素を先祖代々さかのぼって抽出しますが、.parentsUntil()では抽出を止める条件をセレクタを使って指定できます。セレクタを指定しない、もしくは指定したセレクタの条件が一切の要素にマッチしない場合、html要素までさかのぼってすべての親要素が返されます。書式.parentsUntil()$('li').parentsUntil()$('p').paren...

jQueryオブジェクトの走査

jQuery 「走査系のメソッド」条件にマッチした要素の親要素を抽出する

要素の集合から、条件にマッチした要素の親要素を抽出します。引数に何も指定しなければ、すべての親要素を抽出します。引数にセレクタを記述すれば、条件に応じてフィルタされた親要素の集合が取得できます。.parent()と.parents()は非常に似たメソッドですが、.parent()が直接の親要素だけを返すのに対して、.parents()は階層をさかのぼって先祖となる要素をすべて返します。.paren...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」条件にマッチした要素の兄弟要素を抽出する

要素の集合から、条件にマッチした要素の兄弟要素を抽出します。引数に何も指定しなければ、すべての兄弟要素、引数にセレクタを記述すれば、条件に応じてフィルタされた兄弟要素の集合が取得できます。なお、結果として得られる要素集合には、探索条件にマッチした要素そのものは含まれません。返されるのは兄弟だけで「本人」は除かれます。書式.siblings()$('li.myclass').siblings()$(...

jQueryオブジェクトの走査

jQuery 「走査系のメソッド」要素集合から子要素を抽出する

要素の集合から、条件にマッチした要素の子要素を抽出します。引数に何も指定しなければすべての子要素、引数にセレクタを記述すれば条件に応じてフィルタされた子要素の集合が取得できます。なお、結果として得られる要素集合には、探索条件にマッチした要素そのものは含まれません。返されるのは子だけで「本人」は除かれます。書式.children()$('ul').children()$('ul').children...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」条件にマッチする要素を抽出する

jQueryオブジェクトの持つ要素集合から、条件にマッチする要素だけを抽出し、新たなjQueryオブジェクトとして返します。条件はセレクタで指定することも、クロージャで指定することもできます。クロージャは各要素をテストするので、条件に応じてtrueまたはfalseを返すように記述します。trueを返した場合は抽出後のjQueryオブジェクトに含まれ、falseを返した場合は除かれます。書式.fil...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」インデックス値の範囲で要素を抽出する

要素集合から、0で始まるインデックス値の範囲を指定して要素を抽出し、新たなjQueryオブジェクトを生成します。第２引数の終了インデックスは省略可能で、その場合は開始インデックスで指定した要素から最後の要素までが抽出されます。終了インデックスが指定された場合、抽出されるのは終了インデックスで指定した要素の直前の要素までになります。終了インデックスにマッチする要素は含まれません。インデックス値には負...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」各要素を関数に通して処理する

要素集合として渡されるjQueryオブジェクトを走査し、各要素が持つ様々な値を抽出して新たなjQueryオブジェクトを生成する。コールバック関数内では、現在の要素をJavaScriptのオブジェクト「this」や、jQueryオブジェクトではなく、配列やJavaScriptのオブジェクトに対して同様の処理を行う場合は$.map()メソッドを使用してください。$.map()メソッドは、jQuery1...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」条件にマッチする子ノードを持つ要素の集合を得る

要素集合として渡されたjQueryオブジェクトから、条件にマッチする子ノードを持つ要素を抽出し、新たなjQueryオブジェクトを生成して返します。書式.has( セレクタ )$('ul').has('li')サンプル子に.notdirectクラスの要素を持つli>div要素だけを抽出する<body> <div class="main"> <div class="header"> <h1> サンプル...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」要素の集合から条件にマッチした要素を削除する

要素集合として渡されたjQueryオブジェクトから、条件に合致した要素を除外して新しい要素集合を生成します。条件として渡す引数は、セレクタでもDOM要素でも可です。jQuery1.4では、引数にクロージャが使えるようになりました。クロージャはjQueryオブジェクト内の各要素を順に検査し、動的に除外すべき要素を決定できます。なお、クロージャでは、現在検査中の要素を「$(this)」として参照できま...

JavaScriptjQueryオブジェクトの走査

jQuery 「走査系のメソッド」要素をインデックス値で特定する

要素の集合から、指定したインデックス値に合致するもの以外を除去し、単一の要素を特定します。インデックス値は、要素の集合に対して出現順に0から順に割り振られる整数値です。インデックス値には、「-」を付けた負の値を指定することもできます。この場合、インデックス値は出現順の逆順、つまりドキュメントの下から数えた値で判断されます。インデックス値は0から始まるので、0またはプラスの値を指定した場合は0を起点...

JavaScriptjQueryオブジェクトの走査