Javascript: цикл через каждый третий дочерний узел

Question

Если у меня есть родительский узел, как я могу пройти через каждый третий дочерний узел?

Теперь у меня есть этот код:

var parents = document.getElementById('ID_of_parent');
var first_child = parents.firstChild.data.id;
alert(parents);
alert(first_child);

Для родителей я получил сейчас' [объект HTMLDivElement] ' и для first_child я получил ' undefined '.

Answer 1

var nodes = document.getElementById('ID_of_parent').childNodes;
for(i=0; i<nodes.length; i+=3) {
    alert(nodes[i]);
}

Answer 2

Рассматривали ли вы jQuery?

$("#ID_of_parent > *:nth-child(3n)").each(function() { alert(this);});

Я реализовал демо здесь: http://jsbin.com/ahije4/5

Answer 3

Коллекция element.childNodes - это то, что вам нужно.Вам нужно пропустить дочерние узлы, которые не являются элементами (element.nodeType != 1).

var d = document.getElementById("ID_of_parent");
    if (d)
    {
        for(var i = 0; i < d.childNodes.length; i++)
        {
            if (d.childNodes[i].nodeType == 1)
                alert(typeof(d.childNodes[i]) + "- " + d.childNodes[i].nodeType + ": " + d.childNodes[i].tagName + " - " + d.childNodes[i].innerHTML);
        }
    }

Answer 4

Я бы порекомендовал использовать .css() и или each с jQuery

//set node attribute
($('#ID_of_parent > third_child').css( 'propertyName' , 'value' );

//execute each nodes
$.each($('#ID_of_parent'), function( key, child ) {
    console.log(child);
});

Рабочий образец можно посмотреть здесь:
https://jsfiddle.net/chetabahana/8x65wq32/20/

Answer 5

function makeSkippingIterator(parent,stride) {
    if(isNaN(stride) || stride < 1)
        stride = 1
    var node = parent.firstChild
    return function() {
        var returnable = node,
            cnt = stride
        while(--cnt >= 0 && node) {
            node = node.nextElementSibling
        }
        return returnable
    }
}

продолжайте вызывать генератор, который вы получите, пока он не будет иметь для вас значения.