ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを使用してノードをトラバースする方法

jqueryを使用してノードをトラバースする方法

coldplay.xixiオリジナル: 2020-11-16 13:44:284047ブラウズ

Jquery によるノードのトラバース方法: 1. [children()] メソッドを使用して、要素の子要素のセットと一致させます; 2. [next()] メソッドを使用して、直後の兄弟要素と一致させます要素; 3. [prev ()] メソッドを使用して、要素の直前の兄弟要素と一致します。

#このチュートリアルの動作環境: Windows10 システム、jquery2.2.4、この記事はすべてのブランドのコンピューターに適用されます。

推奨: "

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=&#39;苹果&#39;>苹果</li> 
       <li title=&#39;橘子&#39;>橘子</li> 
       <li title=&#39;菠萝&#39;>菠萝</li> 
</ul>

3. prev() メソッド

このメソッドは、一致する要素の直前の兄弟要素を取得するために使用されます。 dom ツリーの構造

であることがわかっているため、prev() メソッドを通じて

要素を取得できます。コードは次のとおりです:

var $ul=$( "ul").prev();

結果は次のようになります:

あなたの好きな果物は何ですか?

4. Siblings() メソッド

このメソッドは、一致する要素の前後にあるすべての兄弟要素を取得するために使用されます。

上記のコードでは Brothers() メソッドが使用されており、一致する要素の兄弟ノードを取得する、つまり一致する要素の兄弟要素を取得するために使用されました。要素。 jqueryを使用してノードをトラバースする方法

要素は兄弟要素であり、その下の 3 つの

要素も兄弟要素です。

要素の兄弟要素を取得したい場合は、次のコードを使用できます:

var $p2=$("p").siblings ();
//
要素のすぐ隣にある兄弟要素を取得します

得られる結果は次のとおりです:
```
<ul> 
       <li title=&#39;苹果&#39;>苹果</li> 
       <li title=&#39;橘子&#39;>橘子</li> 
       <li title=&#39;菠萝&#39;>菠萝</li> 
</ul>
```
5, Closest()

これは、最も近い一致する要素を取得するために使用されます。まず現在の要素が一致するかどうかを確認し、一致する場合は要素自体を直接返します。一致する要素がない場合は、セレクターに一致する要素が見つかるまで、親要素を段階的に検索します。何も見つからない場合は、空の Jquery オブジェクトが返されます。
たとえば、クリックされたターゲット要素の最も近い li 要素に色を追加するには、次のコードを使用できます:
```
$(document).bind("click",function(e){ 
  $(e.target).closest("li").css("color","red"); 
})
```
関連する無料学習の推奨事項:
JavaScript# ＃＃（ビデオ）＃＃＃＃＃＃

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

JavaScript jquery var 对象 dom 选择器 ul li

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryのhtml()メソッドの使い方次の記事：jqueryのhtml()メソッドの使い方

続きを見る

動的にノードを追加し、ノードをトラバースする jQuery の機能の詳細な説明