ホームページ > 記事 > ウェブフロントエンド > jqueryセレクターを使用して親要素、子要素、兄弟要素を取得するメソッドのインスタンス
jqueryセレクターを使用して親要素、子要素、兄弟要素を取得するメソッドのインスタンス
- 伊谢尔伦オリジナル
- 2018-05-15 11:11:562889ブラウズ
1. 親要素を取得します
1.parent([expr]): 指定された要素のすべての親要素を取得します
<p id="par_p"><a id="href_fir" href="#">href_fir</a>
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></p>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</span>
$(
document
).ready(function(){
$("a").parent().addClass('a_par');
});2. 兄弟要素を取得します。 [expr]):
指定された要素の次の兄弟要素を取得します (次の兄弟要素であることに注意してください)
<!DOCTYPE html> <html> <head> <script type="text/ javascript " src="/jquery/jquery.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css(' background-color ', 'red'); </script> </body> </html>
この例の結果は、リスト項目 4 の背景色のみが赤に変更されます
2, nextAll ( [expr]): 指定された要素の背後にあるすべての兄弟要素を取得します
<p><span>And Again</span></p>
var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');最後の「e388a4556c0f65e1904146cc1a846bee」タグに注目してください。これも「p_next_all」というクラス名で追加されています
3. ): 指定された要素の後の兄弟要素をすべて取得し、指定された要素を追加します
<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p>
var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');最初の「e388a4556c0f65e1904146cc1a846bee」タグに注目してください。この文は、p タグの後のすべての兄弟要素を選択することを意味します。 、そしてあなた自身。 。 。
次の 2 つは、実際には next() と nextAll() の逆です。 4. prev(): 指定された要素の前の兄弟要素を取得します。
5. prevAll(): 指定された要素の前にあるすべての兄弟要素を取得します。
3. 子要素の取得
1. 子要素の検索方法 1: > 例: var aNods = $("ul > a"); 子要素の検索方法 2: 子要素()
3. 子要素を検索するメソッド 3: find()
ここでは、children() と find() の類似点と相違点を簡単に紹介します:
1> Children と
find メソッド
は両方とも子要素を取得するために使用されます。の要素のどちらも、ほとんどの jQuery メソッドと同様にテキスト ノードを返しません。
2> Children メソッドは、その要素の下にある子要素、つまり直接の子のみを取得します。
3> find メソッドは、すべての従属要素、つまり、DOM ツリー内のこれらの要素の子孫を取得します
4> Children メソッドのパラメータ セレクタは、子要素をフィルタリングするために使用されます ただし、パラメータ セレクタ メソッドは、 find メソッドの指定が必要です。 5> find メソッドは実際には jQuery(selector, context) を使用して実装できます。つまり、$('li.item-ii').find('li') は $('li', 'li.item-ii') と同等です。
例:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
Use: $('ul .level- 2').children().css('border', '1px ソリッドグリーン');
$('ul.level-2').find('li').css('border', '1px ソリッドグリーン')。
以上がjqueryセレクターを使用して親要素、子要素、兄弟要素を取得するメソッドのインスタンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。