【徹底解説】JavaScriptとjQueryで要素の子要素インデックスを取得：サンプルコード付き

2024-06-26

JavaScriptとjQueryで要素の子要素インデックスを取得する方法

index()メソッドを使う

JavaScript

const childElement = document.querySelector('.child-element');
const parentElement = childElement.parentNode;
const index = parentElement.children.indexOf(childElement);
console.log(index); // 子要素のインデックスを出力

jQuery

const childElement = $('.child-element');
const parentElement = childElement.parent();
const index = parentElement.children().index(childElement);
console.log(index); // 子要素のインデックスを出力

forEach()ループを使う

const childElement = document.querySelector('.child-element');
const parentElement = childElement.parentNode;
let index = 0;

parentElement.children.forEach((element, i) => {
  if (element === childElement) {
    index = i;
    return;
  }
});

console.log(index); // 子要素のインデックスを出力

const childElement = $('.child-element');
const parentElement = childElement.parent();
let index = 0;

parentElement.children().each((i, element) => {
  if (element === childElement) {
    index = i;
    return false;
  }
});

console.log(index); // 子要素のインデックスを出力

説明

上記のコード例では、まず、取得したい子要素と親要素を取得します。
index()メソッドを使う場合は、親要素の children プロパティを使って子要素のリストを取得し、そのリストの中で取得したい子要素が何番目にあるかを indexOf() メソッドで調べます。
forEach()ループを使う場合は、親要素の children プロパティを使って子要素を順番にループし、現在のループインデックスとループしている要素が一致すれば、そのインデックスを index 変数に代入します。
いずれの方法でも、取得したインデックスは0始まりとなります。

補足

複数の要素が一致する場合、index()メソッドは最初に一致した要素のインデックスを返します。
子要素が削除されている場合、そのインデックスはスキップされます。
パフォーマンスが気になる場合は、index()メソッドの方が効率的に動作します。

サンプルコード：JavaScriptとjQueryで要素の子要素インデックスを取得

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素の子要素インデックスを取得</title>
</head>
<body>
  <div id="parent">
    <p class="child-element">要素1</p>
    <p class="child-element">要素2</p>
    <p class="child-element">要素3</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    // JavaScript
    const childElement = document.querySelector('.child-element');
    const parentElement = childElement.parentNode;
    const index = parentElement.children.indexOf(childElement);
    console.log(`JavaScript: 子要素のインデックスは ${index} です。`);

    // jQuery
    const $childElement = $('.child-element');
    const $parentElement = $childElement.parent();
    const $index = $parentElement.children().index($childElement);
    console.log(`jQuery: 子要素のインデックスは ${$index} です。`);
  </script>
</body>
</html>

このHTMLコードでは、<div id="parent"> 要素の中に、3つの <p> 要素を子要素として配置しています。
各 <p> 要素には、class="child-element" クラスが設定されています。

document.querySelector('.child-element') で、取得したい子要素 (要素2) を childElement 変数に代入します。
childElement.parentNode で、childElement の親要素 (親要素 div) を parentElement 変数に代入します。
parentElement.children.indexOf(childElement) で、parentElement の子要素リストの中で childElement が何番目にあるかを調べ、そのインデックスを index 変数に代入します。
console.log() で、取得したインデックス (2) をコンソールに出力します。

実行結果

上記コードを実行すると、以下の出力がコンソールに出力されます。

JavaScript: 子要素のインデックスは 2 です。
jQuery: 子要素のインデックスは 2 です。

ポイント

このサンプルコードでは、要素2の子要素インデックスを取得していますが、任意の要素の子要素インデックスを取得するように変更できます。
index() メソッドと forEach() ループのどちらを使うかは、状況に応じて選択してください。
複数の要素が一致する場合の挙動や、要素が削除されている場合の挙動については、説明部分で補足しています。

JavaScriptとjQueryで要素の子要素インデックスを取得するその他の方法

.children().eq() メソッドを使う (jQuery)

この方法は、eq() メソッドと children() メソッドを組み合わせて、特定の子要素を取得する方法です。

const $childElement = $('.child-element').eq(2); // 2番目の要素を取得
const $parentElement = $childElement.parent();
const $index = $parentElement.children().index($childElement);
console.log(`jQuery: 子要素のインデックスは ${$index} です。`);

.slice() メソッドを使う (JavaScript)

この方法は、slice() メソッドを使って、取得したい子要素を含む部分配列を作成し、その配列におけるインデックスを取得する方法です。

const childElement = document.querySelector('.child-element');
const parentElement = childElement.parentNode;
const index = Array.prototype.slice.call(parentElement.children).indexOf(childElement);
console.log(`JavaScript: 子要素のインデックスは ${index} です。`);

forループを使う (JavaScript)

const childElement = document.querySelector('.child-element');
const parentElement = childElement.parentNode;
let index = -1;

for (let i = 0; i < parentElement.children.length; i++) {
  if (parentElement.children[i] === childElement) {
    index = i;
    break;
  }
}

console.log(`JavaScript: 子要素のインデックスは ${index} です。`);

.children().eq() メソッドは、children() メソッドで子要素のリストを取得し、eq() メソッドでそのリストの中から特定のインデックスの子要素を取得する方法です。
.slice() メソッドは、開始位置と終了位置を指定して、部分配列を作成する方法です。この場合、開始位置は0、終了位置は取得したい子要素の次のインデックスに設定することで、取得したい子要素を含む部分配列を作成します。
for ループは、最もシンプルな方法ですが、他の方法に比べて処理速度が遅くなる可能性があります。