jqueryを使用してノードをトラバースする方法-jsチュートリアル-php.cn

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

coldplay.xixi

リリース： 2020-11-30 11:09:00

オリジナル

4030 人が閲覧しました

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

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

#このチュートリアルの動作環境: 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> 要素の直後の兄弟要素を取得します

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

<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 サイトの他の関連記事を参照してください。