javascript 或 jquery 中的 nth-child 等效项答案

【问题标题】：nth-child equivalent in javascript or jqueryjavascript 或 jquery 中的 nth-child 等效项
【发布时间】：2016-02-03 00:45:02
【问题描述】：

我的问题目前只是 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;
}

感谢任何帮助！

【问题讨论】：

不确定，但api.jquery.com/nth-child-selector 听起来像您要找的东西？
很可能是其他问题
如果 jQuery 的实现确实更快，我会感到惊讶。

标签： javascript jquery css css-selectors

【解决方案1】：

这是 jQuery 等价物，

例子：

选择每个 <p> 元素，它是其父元素的第三个子元素：

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

语法：

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

或使用 eq();

选择第二个<p>元素：

$("p:eq(1)")

语法：

$(":eq(index)")

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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/

【讨论】：