1

nav1からnav9までを追加しようとしていますが、その前にすべての追加クラスも追加しています。したがって、2番目のNavアイテムのクラスは、「nav1nav2」というようになります。最初のnavアイテムに「nav1」、2番目に「nav2」、3番目に「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つのクラスだけを表示するにはどうすればよいですか？

4

5 に答える 5

4

これを好きにしてください

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

。各（）

于 2012-06-14T05:04:25.713 に答える
1

これを試して：

$("#navigation ul li").each(function(i, v){
    $(this).addClass('nav' + (i + 1))
})
于 2012-06-14T05:05:45.500 に答える
0

あなたもこのようにそれを行うことができます：

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は、ここでn番目の子を使用しているため、10番目のリストアイテムのnav1、11番目のリストアイテムのnav2などのクラスを繰り返すためのものです。

10番目の要素にnav10、11番目の要素にnav11などで1回だけ繰り返す場合は、次のようなパターンを使用できます。

var liCount = $("#navigation ul li").size();
for(var i=0;i<liCount;i++){
    $("#navigation ul li:eq(" + i + ")").addClass("nav" + (i+1));
}
于 2012-06-14T05:06:01.637 に答える
0

each functionクラスを何度も繰り返さないように使用できます。クラスを開始する番号から変数を宣言します。たとえばi=1、nav1、nav2などのクラスを適用します。

アイテムの数に関係なく、クラスを順番に追加し続けます。

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

これがデモです

于 2012-06-14T05:17:27.863 に答える
0

javascriptのクリーンアップにあまり踏み込むことなく、「nth-child」とは何か、そしてそれがどのように使用されるかについての復習が役立つかもしれないと思います。

式「n+5」では、「5」が開始点であり、「n」はすべての正の整数（ゼロを含む）のセットです。したがって、CSSルールは、5から始まるすべての子要素に適用されます。

式「2n+5」では、開始点は5であり、2n = {0、2、4、6、8など}です。したがって、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.orgN番目の子

于 2012-06-14T05:19:25.320 に答える