jquery css3问题

有没有办法把这个写得更优雅？jquery css3问题

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

来源

2011-06-13 user154107

这是要在列表中的每个元素的完成，或者永远只是前三？ – 2011-06-13 21:30:41

我会去：

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

这样，你可以得到所有的CSS出你的JS。

来源

2011-06-13 21:34:22

但是，这工作，我从上面添加lt（3）： – user154107 2011-06-14 13:35:52

$（“li.list_restaurant_item：lt（3）”）。addClass（'listPageHighlights'）; – user154107 2011-06-14 13:36:04

最起码，你能避免冗余查找：

$("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 -based，所以上面的匹配前三项（0,1和2）。

来源

2011-06-13 21:31:53

手头任务的整个范围都特别明确，但您可以通过创建样式并根据需要添加/删除来更清晰地完成此任务。

创建一个可重复使用的风格：

.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");

如果这是列表中的所有项目做，那么你可以可能在列表元素上使用each方法。像这样的东西可能做的伎俩：

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

来源

2011-06-13 21:34:02

你可以写：

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

来源

2011-06-13 21:34:30 Variant

回答

相关问题