ホームページ > 記事 > ウェブフロントエンド > jqueryを使用してノードをトラバースする方法
#このチュートリアルの動作環境: Windows10 システム、jquery2.2.4、この記事はすべてのブランドのコンピューターに適用されます。 推奨: "Jquery によるノードのトラバース方法: 1. [children()] メソッドを使用して、要素の子要素のセットと一致させます; 2. [next()] メソッドを使用して、直後の兄弟要素と一致させます要素; 3. [prev ()] メソッドを使用して、要素の直前の兄弟要素と一致します。
jquery ビデオ チュートリアル "
jquery のノード走査方法:
1、children( )メソッド
このメソッドは、一致する要素の子要素のセットを取得するために使用されます。 children() メソッドを使用して、一致する要素のすべての子要素の数を取得します。var $body=$("body").children(); var $p=$("p").children(); var $ul=$("ul").children(); alert("$body.length"); //<body>元素下有2个子元素 alert($p.length); //<p>元素下有0个子元素 alert("$ul.length"); //<ul>元素下有3个子元素 for(var i=0;len=$ul.length;i<len;i++)<br>{ alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容 }
2. next() メソッド
このメソッドは、一致する要素のすぐ後ろにある兄弟要素を取得するために使用されます。var $p1=$("p").next;//<p> 要素の直後の兄弟要素を取得します </p>
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul>
3. prev() メソッド
このメソッドは、一致する要素の直前の兄弟要素を取得するために使用されます。 dom ツリーの構造であることがわかっているため、prev() メソッドを通じて
要素を取得できます。コードは次のとおりです:
var $ul=$( "ul").prev();
//結果は次のようになります:
あなたの好きな果物は何ですか?
4. Siblings() メソッド
このメソッドは、一致する要素の前後にあるすべての兄弟要素を取得するために使用されます。
上記のコードでは Brothers() メソッドが使用されており、一致する要素の兄弟ノードを取得する、つまり一致する要素の兄弟要素を取得するために使用されました。要素。
DOM ツリーの構造を例に挙げます。要素は兄弟要素であり、その下の 3 つの
要素の兄弟要素を取得したい場合は、次のコードを使用できます:
var $p2=$("p").siblings ();
//要素のすぐ隣にある兄弟要素を取得します
得られる結果は次のとおりです:
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul>
5, Closest()
これは、最も近い一致する要素を取得するために使用されます。まず現在の要素が一致するかどうかを確認し、一致する場合は要素自体を直接返します。一致する要素がない場合は、セレクターに一致する要素が見つかるまで、親要素を段階的に検索します。何も見つからない場合は、空の Jquery オブジェクトが返されます。
たとえば、クリックされたターゲット要素の最も近い li 要素に色を追加するには、次のコードを使用できます:$(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); })
関連する無料学習の推奨事項:
JavaScript# ## (ビデオ )######以上がjqueryを使用してノードをトラバースする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。