Question

有没有办法更优雅地写这个？

$("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");

Answer 1

至少，您可以避免冗余查找：

$("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"
});

或者，根据您的标记，:lt selector可能会这样做：

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

请注意，与:nth-child不同，:lt索引是基于0的，因此上述内容与前三项（0，1和2）。

Answer 2

我会去：

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

这样你就可以从你的JS中获取所有的CSS。

Answer 3

你可以写：

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

Answer 4

手头的任务的整个范围都特别明确，但你可以通过创建一个样式并在必要时添加/删除它来更清楚。

创建可重复使用的样式：

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

根据需要为每个项目添加课程：

$("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");

如果要对列表中的所有项目执行此操作，则可以在list元素上使用each方法。这样的事情可能会起到作用：

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

jquery css3的问题

4 个答案: