Логотип Хекслета
/
Вопросы и ответы
/
JavaScript
/

как определить индекс дочернего узла в javascript без использования jquery

как определить индекс дочернего узла в javascript без использования jquery

JavaScript
JS

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

0

Для этого можно использовать встроенные методы работы с 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

8 месяцев назад

Ivan Gagarinov

Похожие вопросы