使用 Javascript 为每个第三个元素添加类答案

【问题标题】：Add Class to every 3rd Element with Javascript使用 Javascript 为每个第三个元素添加类
【发布时间】：2012-05-10 05:43:42
【问题描述】：

我正在尝试使用 javascript 选择父级的每三个元素并向其添加一个 css 类。对我来说听起来很简单，但我无法让它工作。我发现 this 线程对我来说看起来很不错，但我对 javascript 非常不满意，以至于我的尝试没有成功：

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

当我加载这个时，什么都没有发生。
任何修复、大开眼界和提示都值得赞赏。
问候，玛丽安

【问题讨论】：

标签： javascript selector nodes

【解决方案1】：

我发现确定每三分之一最直接的方法是在进行模数时将索引加1：

var nodes = //get nodes

for(var i = 0; i < nodes.length; i++) {
  var isThirdIteration = (i + 1) % 3 === 0;

  if (isThirdIteration) {
    this.className += ' newClassName';
  }
}

【讨论】：

【解决方案2】：

您可以使用纯 CSS 来实现。不需要 Javascript ;)

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

【讨论】：

【解决方案3】：

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

【讨论】：

+1 这个答案是正确的。虽然我看不到 filter 和 forEach 的好处。
@amnotiam 将 filter 和 forEach 减少到一个语句中是一种微优化。当然你可以在 forEach 中使用 if。
不担心优化。只是更清洁的代码。希望我可以再给一个 +1，因为我敢在 StackOverflow 上省略分号。
@amnotiam 干净的代码很难做到。我敢肯定，如果我用 for 循环重写代码，它会更具可读性：P
希望我也能再给一个 +1。很少能在答案中看到干净的代码。

【解决方案4】：

这会返回一个元素列表：

document.getElementsByClassName("ParentsClassName")

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

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

【讨论】：