jqueryを使用して親要素内の要素の位置を取得する方法

var index = $("li:eq(1)").index();
console.log(index); // 输出 1

上記のコードは、最初にセレクター $("li:eq(1)") を使用して 2 番目の

しかし、兄弟ノードではなく親要素内の要素の位置を取得したい場合はどうすればよいでしょうか?現時点では、この目標を達成するには、parent()、children()、index() の 3 つのメソッドを組み合わせて使用​​する必要があります。以下は具体的な例です。

  
Item 1
  
Item 2
  
Item 3
  
Item 4

上記の HTML 構造には、

要素があり、これには 4 つの
• 要素が含まれています。
• 要素の 1 つには、選択された要素として識別するための selected クラスがあります。選択した
• 要素の親要素内の位置を知りたいと考えています。

  これを実現するには、次の jQuery コードを使用できます。

  var selectedLi = $("li.selected");
  var parentUl = selectedLi.parent();
  var index = parentUl.children("li").index(selectedLi);
  console.log(index); // 输出 1

  ログイン後にコピー

  上記のコードは、最初にセレクター $ ("li.selected") を使用して # で項目を選択します。 ##selected クラスの

• 要素を取得し、parent() メソッドを使用してその親要素
  を取得します。次に、children("li") メソッドを使用して、
  要素の下にあるすべての
  • 子要素を取得し、次を使用します。 index() メソッドは、親要素内の選択された
  • 要素の位置を取得します。
    結果として得られる数は 1 です。これは、選択した

  • 要素の位置が親要素の 2 番目であることを意味します。
    要約すると、

    parent()、children()、index() という 3 つのメソッドを組み合わせることで、簡単に位置を取得できます。親要素内の要素の。これは、DOM 操作における jQuery の非常に一般的な要件であり、jQuery で最も実用的な方法の 1 つでもあります。

    以上がjqueryを使用して親要素内の要素の位置を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。