Question

我正在尝试使用javascript选择父级的每个第三个元素，并为其添加一个css类。对我来说听起来很简单，但我无法让它发挥作用。我发现this线程对我来说看起来相当不错，但是我用javascript这样的wuss我的尝试没有用完：

var nodes = document.getElementsByClassName("ParentsClassName").childNodes;
for(i=0; i<nodes.length; i+=3) {
  this.className += ' newClassName';
}

当我加载它时，根本没有任何事情发生。
任何修复，眼睛和提示都会受到赞赏问候，玛丽安

Answer 1

var parents = document.getElementsByClassName("someClass"),
    forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach),
    filter = Array.prototype.filter.call.bind(Array.prototype.filter)

forEach(parents, addClassToEveryThirdChild)

function addClassToEveryThirdChild(parent) {
    filter(parent.children, selectEveryThirdChild)
        .forEach(addSomeClass)
}

function selectEveryThirdChild(elem, i) {
    return i % 3 === 0
}

function addSomeClass(elem) {
    elem.classList.add("newClassName")
}

或使用循环

var parents = document.getElementsByClassName("someClass")

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children

    for (var j = 0, jj = children.length; j < jj; j++) {
        var elem = children[j]
        if (j % 3 === 0) {
            elem.classList.add("newClassName")
        }
    }
}

Answer 2

我发现确定每个第三个的最直接的方法是在执行模数时为索引添加1：

private long timeRemaining;
private Handler handler;

Answer 3

你可以用纯CSS做到这一点。 Javascript不是必需的;）

示例：.parent .child:nth-of-type(3n+3)

Answer 4

这将返回元素列表：

document.getElementsByClassName("ParentsClassName")

您可以遍历列表，也可以选择索引：

document.getElementsByClassName("ParentsClassName")[0].childNodes;

使用Javascript将Class添加到每个第3个元素

4 个答案: