jQuery ノードのトラバーサル方法の概要

この記事は、誰もが jQuery ノードをより明確に理解できるように、主に jQuery ノードを横断する方法を収集して整理しています。これは非常に優れており、必要な友人が参考になれば幸いです。みんな。

1.children() メソッド: $('p').children()---p 要素のすべての子要素ノードをトラバースして検索します

<p>Hello</p>
<p>
  <span>Hello Again</span>
  </p><p>您好!</p>

<p>And Again</p>
<script>
  $(&#39;p&#39;).children();   //<span>Hello Again<p class="box">您好!
  $(&#39;p&#39;).children(&#39;.box&#39;)  //<p class="box">您好!
</script>

2.next() メソッド: $('p')。 next( ) --- p要素の後に隣接する兄弟要素を検索しますが、すべての兄弟要素ではありません

【関連メソッド】

(1)nextAll()メソッド：$('p').nextAll() ---- すべて検索しますp後の兄弟要素

(2)nextUntil()メソッド: $('p').nextUntil('p')----p以降のp要素までの兄弟要素をすべて検索

<p>Hello</p>
<p>Hello Again</p>
<p>
  <span>And Again</span>
</p>
<script>
  $(&#39;p&#39;).next();   //<p>Hello Again<p><span>And Again
  $(&#39;p&#39;).next(&#39;.box&#39;);  //<p class="box">Hello Again
</script>

3 .prev()メソッド: $('p').prev() ---- p の前に隣接する兄弟要素を検索

[関連するメソッドは]

(1) prevAll() メソッド: $('p ').prevAll() ---- p より前の兄弟要素をすべて検索

(2) prevUntil() メソッド: $('p').prevUntil('p') --- p より前の要素を p まで検索

<p>Hello</p>
<p>
  <span>Hello Again</span>
</p>
<p>And Again</p>
<script>
  $(&#39;p&#39;).prev();  //<p><span>Hello Again
</script>

4 のすべての要素。 Brothers() メソッド: $('p').siblings()---- p

5.find() メソッドの前後のすべての兄弟要素を検索します: $('p') .find('span') - --- p 要素内のサブ要素を見つけます。それは span 要素です

6.eq() メソッド: $('p').eq(1) --- 2 番目の p 要素を見つけます (インデックスの添え字が始まります) from 0)

7.first() メソッド: $('li').first() --- 最初の li 要素を取得

8.last() メソッド: $('li') .last() - -- 最後の li 要素を取得

9.filter() メソッド: $('p').filter('.box') --- クラス名 box

10 の p 要素を取得します。 : $('.box').is('p') ---- .box が p 要素であるか判定

11.map() メソッド: $('p').map(callback) --- 実行各 p のコールバック関数

例: input 要素を走査してその値を取得し、それを「,」で区切られた p 要素の後ろに追加します

<p><b>Values: </b></p>

     

<script> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); //<p>John, password, http://ejohn.org/ </script>

12.hasClass() メソッド: $('p')。 hasClass ('box') ---- クラス名を持つ p

13.has() メソッドを検索 box: $('p').has('span') ---- spap 要素 p 要素を持つ p を検索

14.not() メソッド: $('p').not('span') ----span 要素を含まない p 個の要素を検索します

15.slice() メソッド: $('p ')。 slide(0,2) ---- 1 番目の p 要素から 3 番目の p 要素を検索します

16.offsetParent() メソッド: $('p').offsetParent() --- p 要素を検索します 最初に位置する祖先element

17.parent() メソッド: $('p').parent() ---- p 要素の唯一の親ノードを含む要素セットを返します

18.parents() メソッド: $('p ').parent() ---- p 要素を含むすべての祖先ノードを返します (ルート ノードを除く)

19.parentUntil() メソッド: $('p').parentUntil('# box') --- - #box までの p 要素の祖先要素を検索します

20.contents() メソッド: $('p').contents() --- p 要素内のすべての子ノード (Text ノードを含む) を返します

21 .end() メソッド: $('p').find('span').end() ---- ステートメントの本体を前の状態に戻します。つまり、span 要素を見つけた後にフォーカスします。 Return to p 要素

<p>
  <span>Hello</span>,
  how are you?
</p>
<script>
  $(&#39;p&#39;).find(&#39;span&#39;).addClass(&#39;test&#39;).end().attr(&#39;title&#39;,&#39;title1&#39;);
  //span添加class=test;p添加title=title1
</script>

関連する推奨事項:

動的にノードを追加し、ノード関数を走査する jQuery の実装の詳細な説明

ノードを走査するための Jquery メソッドの小さなセット_jquery

jQuery 変更するループ トラバーサルの詳細な説明タグの href

以上がjQuery ノードのトラバーサル方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。