使用jquery选择ul li的每个元素

Question

我有一个ul li形式的菜单，我想为li的每个孩子添加不同的css类。

以下是javascript代码：

$("#menu").ready(function () {
  $("#menu ul li").addClass("menu_background1");
});

的CSS：

.menu_background1 {
    background:#FF0;
}

.menu_background2 {
    background:#66C;
}

我应该如何使用jQuery选择每个孩子？每个孩子都应该有不同的CSS课程。

Answer 1

您可以使用addClass的功能：

$(document).ready(function () {
    $("#menu ul li").addClass(function(i){
       return 'menu_background' + (i+1)
    });
});

http://jsfiddle.net/5Buh9/

Answer 2

使用each代替

$("#menu ul li").each(function(i){
   $(this).addClass("menu_background"+(i+1));
});

Answer 3

尝试使用:eq()选择器 -

$("#menu ul li:eq(0)").addClass("menu_background1");
$("#menu ul li:eq(1)").addClass("menu_background2");