Question

如果我有父节点，我怎样才能遍历每个第三个子节点？

我现在有了这段代码：

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

对于父母，我现在得到' [object 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

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
    }
}

继续调用你回来的生成器，直到它对你没有任何价值。

Answer 5

我建议使用.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/

Javascript：循环遍历每个第三个子节点

5 个答案: