Как перебрать все дочернии элементы на javascript

В этой статье я приведу пример, того как можно перебрать все дочернии элементы и получить их значения.
Для работы скрипта необходимо подключить библиотеку jQuery.
Рассмотрим такой пример: необходимо получить значения дочерних элементов, которые находятся в двух блоках с одинаковым id, и записать значения в массив.
Html будет такой:

<div id="parent_div">
    <span id="child_element">text 1</span>
    <span id="child_element">text 2</span>
    <span id="child_element">text 3</span>
</div>
 
<div id="parent_div">
    <span id="child_element">text 4</span>
    <span id="child_element">text 5</span>
    <span id="child_element">text 6</span>
</div>

var arrayData = []; // массив, для данных
var num = 0; // счетчик, для родительских елементов
$('div#parent_div').each(function(){ // перебираем все родительские елементы
    var oneDiv = $(this);
    var countSpan = oneDiv.find('span#child_element').length - 1; // считаем количество span'ов в одном родителе
    var spansData = []; // массив для данных из span'он одного родителя
    for(i = 0; i <= countSpan; i++){ // перебираем все span'ы одного родителя
        var dataSpan = oneDiv.find('span#child_element').eq(i).html(); // получаем данные из одного span'а
        spansData[i] = dataSpan; // записываем в массив данные
    }
    arrayData[num] = spansData; // записываем в основной массиы массив с данными из спанов одного родителя
    num ++; // увеличиваем счетчик родителей
});
console.log(arrayData); // выводим массив в консоль
Теги:
дочернии элементы
Добавлено: 23 Апреля 2018 12:20:23 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...