jQuery_jqueryで親要素ノード、子要素ノード、兄弟要素ノードを取得する方法

この記事の例では、jQuery が親要素ノード、子要素ノード、兄弟要素ノードを取得する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

まず、この HTML コードを見てみましょう。ノード (父、息子、兄弟など) を取得するメソッド全体は、次のコードに基づいています。

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

JQUERY 親ノードの取得:

jquery には、parent()、parents()、closest()、find、first-child など、親要素を取得する方法が多数あり、親ノード、子ノード、兄弟ノードの検索に役立ちます

たとえば、parent() を使用して親ノードを取得します

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

次に、主にparents()メソッドとclosest()メソッドの違いについて説明します

1. 最も近い要素は現在の要素から一致と検索を開始し、親は親要素から一致と検索を開始します

2. 最も近いものは、一致する要素が見つかるまで上方向に検索し、その後停止します。その後、これらの要素を一時コレクションに入れ、指定されたセレクター式を使用して

をフィルターします。

3. 最も近い要素は 0 または 1 つの要素を返します。親には 0、1、または複数の要素が含まれる場合があります

コードは次のように記述できます:

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

JQUERY 兄弟ノードの取得

JQuery 兄弟ノードの取得。私たちのアイデアは、現在のノードを通じて親ノードを見つけ、次に親ノードを通じて子ノードを見つけることです。コードは次のとおりです

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

もう 1 つの方法は、兄弟() 関数を使用することです。コードは次のとおりです

$(".title").siblings('ul');
//找到自己的兄弟节点ul

JQUERY 子ノードの取得

最初の子要素と一致します。最初は 1 つの要素のみと一致し、このセレクターは親要素ごとに 1 つの子要素と一致します

$(".par:first-child");
//取得id为firstli的节点

セレクターを介して取得します。コードは次のとおりです:

$('#firstli h3.title');
//取得条目一的h3

上記のように find() 関数を使用します。使い方は同じです

$("#firstli").find("h3");
//找到子兄弟节点h3

children() 関数を使用します。コードは次のとおりです

$("#firstli").children("h3.title");
//取得子节点h3、class为title 

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「

JQuery トラバーサル アルゴリズムとスキルの概要」、「jQuery テーブル (テーブル) 操作のスキルの概要」を参照してください。 " 、"jQuery のドラッグ効果とテクニックのまとめ"、"jQuery 拡張テクニックのまとめ"、"jQuery の一般的な古典的な特殊効果のまとめ" 、「jQuery アニメーションと特殊効果の使い方まとめ」、「jQuery セレクターの使い方まとめ」、「jQuery の共通プラグインと使い方まとめ」

この記事が jQuery プログラミングのすべての人に役立つことを願っています。