javascript或jquery中的nth-child等效项

Question

我的问题目前仅是CSS中的第n个子元素在Google Chrome上的运行速度非常慢。

因此，我想用其他选项（例如javascript / jquery或另一种语言）编写此代码，以实现完全相同的效果。

div.testbox:nth-child(4n+6) {
margin-left : 0px;
margin-right : 1%;
}
div.testbox:nth-child(4n+3) {
margin-left : 0px;
margin-right : 0px;
}

任何帮助表示赞赏！

Answer 1

这是等效的jQuery，

例：

选择作为其父级的第三个子级的每个<p>元素：

$("p:nth-child(3)")

句法：

:nth-child(n|even|odd|formula)

或者使用eq（）;

选择第二个<p>元素：

$("p:eq(1)")

Syantax：

$(":eq(index)")

我将使用jQuery，它的语法与CSS几乎完全相同。

Answer 2

它的语法基本相同。 我做了一个jsfiddle来显示结果。

$("div.testbox:nth-child(4n+6)").css('background-color', "#333");
$("div.testbox:nth-child(4n+3)").css('background-color', "#eee");

Answer 3

这是@Victory答案的纯JavaScript版本：

https://jsfiddle.net/ryanpcmcquen/c7m16z5h/

 Array.prototype.slice.call(document.querySelectorAll("div.testbox:nth-child(4n+6)")).map(function(i) { i.style.backgroundColor = "#333"; }); Array.prototype.slice.call(document.querySelectorAll("div.testbox:nth-child(4n+3)")).map(function(i) { i.style.backgroundColor = "#eee"; }); 

 div.testbox:nth-child(4n+6) { color: red; } div.testbox:nth-child(4n+3) { color: blue; } 

 <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> <div class="testbox">here is some text</div> 

更好的是，如果要一遍又一遍地使用它，则使其成为一个函数：

(function (win) {
    win.styleChange = function (selectors, styleProp, styleValue) {
        Array.prototype.slice.call(document.querySelectorAll(selectors)).map(function (i) {
            i.style[styleProp] = styleValue;
        });
    };
}(window));
styleChange("div.testbox:nth-child(4n+6)", "backgroundColor", "#333");
styleChange("div.testbox:nth-child(4n+3)", "backgroundColor", "#eee");

https://jsfiddle.net/ryanpcmcquen/pL7Ln3dz/