使用第 n 个孩子答案

【问题标题】：Using nth-child使用第 n 个孩子
【发布时间】：2012-06-14 05:02:32
【问题描述】：

我正在尝试通过 nav9 添加 nav1 及其工作，但它也在它之前添加了所有额外的类。所以第二个导航项目的类最终是“nav1 nav2”等等。我只想要“nav1”作为第一个导航项目，“nav2”作为第二个，“nav3”作为第三个等等。这就是我所拥有的：

$("#navigation ul li:nth-child(n)").addClass("nav1")
$("#navigation ul li:nth-child(n+2)").addClass("nav2")
$("#navigation ul li:nth-child(n+3)").addClass("nav3")
$("#navigation ul li:nth-child(n+4)").addClass("nav4")
$("#navigation ul li:nth-child(n+5)").addClass("nav5")
$("#navigation ul li:nth-child(n+6)").addClass("nav6")
$("#navigation ul li:nth-child(n+7)").addClass("nav7")
$("#navigation ul li:nth-child(n+8)").addClass("nav8")
$("#navigation ul li:nth-child(n+9)").addClass("nav9")

我看到它说 n+#，但我如何让它只显示我想要的 1 个类？

【问题讨论】：

如果我最终写出这样的东西，我会后退几步，看看更大的图景。它看起来不必要地重复，虽然它可能不是一个选择，但我会鼓吹重构和重新思考这种方法，着眼于简单性和“我为什么要这样做真的。
w3.org/TR/selectors/#nth-child-pseudo

标签： jquery html css-selectors

【解决方案1】：

这样做

$("#navigation ul li").each(function(i){
   $(this).addClass('nav'+(i+1));
});

.each()

【讨论】：

干净多了。仍然有一个问题，为什么它是必要的（如果像检查它的位置这样的东西没有用）。
@JaredFarrish 对不起先生，我不明白您的评论，请随时编辑我的答案以使其更好。我一直在寻找学习写好答案和学习新事物的方法。 :)

【解决方案2】：

试试这个：

$("#navigation ul li").each(function(i, v){
    $(this).addClass('nav' + (i + 1))
})

【讨论】：

【解决方案3】：

你也可以这样做：

var liCount = $("#navigation ul li").size();
var modConstant = 9;
for(var i=0;i<liCount;i++){
    $("#navigation ul li:eq(" + i + ")").addClass("nav" + ((i % modConstant)+1));
}

mod 用于在第 10 个列表项上重复 nav1 类，在第 11 个列表项上重复 nav2 等类，因为您在这里使用 nth-child。

如果您只想在第 10 个元素上使用 nav10 并在第 11 个元素上使用 nav11 重复一次，依此类推，您可以使用这样的模式：

var liCount = $("#navigation ul li").size();
for(var i=0;i<liCount;i++){
    $("#navigation ul li:eq(" + i + ")").addClass("nav" + (i+1));
}

【讨论】：

【解决方案4】：

您可以使用each function，这样它就不会一次又一次地重复课程。声明你的变量你想从什么数字开始你的课程，例如i=1应用像nav1，nav 2这样的类......

无论你有多少物品，它都会按顺序添加类。

var i = 1;
$(".nav li").each(function() {
    $(this).addClass('nav' + i);
    i++
})

Here is a demo

【讨论】：

【解决方案5】：

无需过多地清理你的 javascript，我认为复习一下“nth-child”是什么以及它是如何使用的可能会有用。

在等式“n+5”中，“5”是起点，“n”是所有正整数（包括零）的集合。因此，CSS 规则将应用于 每个子元素，从 5 开始

在等式“2n+5”中，起点为5，2n = {0, 2, 4, 6, 8, etc.}。所以 CSS 规则将应用于第 5 个子元素 (0 + 5)，然后是第 7 个 (2 + 5)、第 9 个 (4 + 5)、第 11 个 (6 + 5) 等。

因此，要修复您的代码，请从每个 nth-child() 指令中删除“n”。

例如：

改变

$("#navigation ul li:nth-child(n+6)").addClass("nav6")

到

$("#navigation ul li:nth-child(6)").addClass("nav6")

阅读此处了解更多详情...w3.org N-th Child

【讨论】：