javascript - 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

:eq()セレクターで試してください-

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

Answer 3

eachそのために使う

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