jquery css3 question

Is there a way to write this more elegantly??

$("li.list_restaurant_item:nth-child(1)").css("background-color", "#FBE9E7");
$("li.list_restaurant_item:nth-child(1)").css("padding", "4px");
$("li.list_restaurant_item:nth-child(2)").css("background-color", "#FBE9E7");
$("li.list_restaurant_item:nth-child(2)").css("padding", "4px");
$("li.list_restaurant_item:nth-child(3)").css("background-color", "#FBE9E7");
$("li.list_restaurant_item:nth-child(3)").css(开发者_开发百科"padding", "4px");

---

I'd go:

$("li.list_restaurant_item:nth-child(1)").addClass('someClass')

That way you can get all of the CSS out of your JS.

---

you can write:

$("li.list_restaurant_item").slice(0, 3).css({"background-color": "#FBE9E7", "padding": "4px");

---

At the very least, you can avoid the redundant lookups:

$("li.list_restaurant_item:nth-child(1), li.list_restaurant_item:nth-child(2), li.list_restaurant_item:nth-child(3)").css({
    "background-color": "#FBE9E7",
    "padding", "4px"
});

Or depending on your markup, the :lt selector might do it:

$("li.list_restaurant_item:lt(3)").css({
    "background-color": "#FBE9E7",
    "padding", "4px"
});

Note that unlike :nth-child, :lt indexes are 0-based, and so the above matches the first three items (0, 1, and 2).

---

The entire scope of the task at hand it note specifically clear, but you could make this clearer by creating a style and adding / removing that as necessary.

Create a re-usable style:

.MyStyleClass { background-color:#FBE9E7; padding:4px; }

Add the class as required, per item:

$("li.list_restaurant_item:nth-child(1)").addClass("MyStyleClass");
$("li.list_restaurant_item:nth-child(2)").addClass("MyStyleClass");
$("li.list_restaurant_item:nth-child(3)").addClass("MyStyleClass");

If this is to be done for all items in the list, then you could possibly use the each method on the list element. Something like this might do the trick:

$.each($("li.list_restaurant_item").children(), function () {
    $(this).addClass("MyStyleClass");
});