Получить дочерние и дочерние узлы в HTML с помощью JavaScript - PullRequest
Новая
       19

Получить дочерние и дочерние узлы в HTML с помощью JavaScript

0 голосов
/ 12 июня 2018

У меня есть сетка, выполненная в формате html, вот так 

<div class="grid-container" id="grid-container">
            <div class="grid-row">
                <div class="grid-cell red"><p class="label">R</p></div>
                <div class="grid-cell"></div>
                <div class="grid-cell blue"><p class="label">B</p></div>
            </div>
            <div class="grid-row">
                <div class="grid-cell"></div>
                <div class="grid-cell white"><p class="label">W</p></div>
                <div class="grid-cell"></div>
            </div>
            <div class="grid-row">
                <div class="grid-cell"></div>
                <div class="grid-cell blue"><p class="label">B</p></div>
                <div class="grid-cell blue"><p class="label">B</p></div>
            </div>
        </div>

Я хочу иметь возможность обновлять JavaScript для каждой ячейки индивидуально.Для этого я попытался написать скрипт, который получает все дочерние узлы сетки, а затем снова получает дочерние узлы каждой строки.Однако, когда я проверяю вывод, три строки возвращаются нормально, но их потомки возвращаются как 7 объектов вместо 3. Я очень запутался ... 

function myFunction() {
var c = document.getElementById("grid-container").childNodes;
var b;
var txt = "";
for (var i = 0; i < c.length; i++) {
    txt = txt + "Row: " + c[i].nodeName + "<br>";
    b = c[i].childNodes;
    for (var j = 0; j < b.length; j++) {
        txt = txt + "Cell: " + b[i].nodeName + " Value: " + b[i].className + "<br>";
    }

}

document.getElementById("demo").innerHTML = txt;}

Вот вывод, который он мне дает:

Output

1 Ответ

0 голосов
/ 21 июня 2018

Для написания ответа на вопрос Loilo просто используйте children вместо childNodes

...