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

jquery css3問題

回答

相關問題