как определить индекс дочернего узла в javascript без использования jquery
Ответы
Для этого можно использовать встроенные методы работы с DOM:
// Предположим, у вас есть HTML структура, например:
// <div id="parent">
// <span>Child 1</span>
// <span>Child 2</span>
// <span>Child 3</span>
// </div>
const parentElement = document.getElementById('parent');
// Предположим, вы хотите найти индекс второго дочернего элемента (Child 2)
const childNode = parentElement.children[1]; // получаем Child 2
// Определяем индекс дочернего узла
const index = Array.from(parentElement.children).indexOf(childNode);
console.log(index); // Вывод: 1
В примере мы используем document.getElementById('parent')
для получения родительского элемента div
. parentElement.children
возвращает коллекцию всех дочерних элементов, которые принадлежат этому родителю. children
возвращает только элементы (тегированные узлы), в отличие от childNodes
, который включает также текстовые и комментарные узлы.
Чтобы найти индекс конкретного дочернего узла, мы используем Array.from()
, чтобы преобразовать коллекцию HTMLCollection
в массив. Затем применяем метод indexOf()
, который возвращает индекс элемента или -1
, если элемент не найден.
Вы также можете определить индекс узла, используя цикл:
let index = -1;
const childNode = parentElement.children[1]; // получаем Child 2
for (let i = 0; i < parentElement.children.length; i++) {
if (parentElement.children[i] === childNode) {
index = i;
break; // прерываем цикл, так как нашли нужный узел
}
}
console.log(index); // Вывод: 1
0
0