使用 Javascript 将类添加到每个第三个元素 [英] Add Class to every 3rd Element with Javascript
本文介绍了使用 Javascript 将类添加到每个第三个元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 javascript 选择父元素的每三个元素并向其添加一个 css 类.对我来说听起来很简单,但我无法让它工作.我发现了这个 线程对我来说完成这项工作看起来很不错,但我对 javascript 如此痴迷,以至于我的尝试没有成功:
I'm trying to select every third element of a parent with javascript and add a css class to it. Sounds pretty simple to me but I can't get it work. I found this thread which looked quite nice to me to get that done, but I'm such a wuss with javascript that my tries didn't work out:
var nodes = document.getElementsByClassName("ParentsClassName").childNodes;
for(i=0; i<nodes.length; i+=3) {
this.className += ' newClassName';
}
当我加载它时,什么也没有发生.
感谢任何修复、大开眼界和提示.
你好,玛丽安
When I load this, nothing happens at all.
Any fixes, eyeopeners and tips appreciated.
Greetings, Marian
推荐答案
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")
}
}
}
这篇关于使用 Javascript 将类添加到每个第三个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文