вопрос jquery css3

#jquery #css

Вопрос:

Есть ли способ написать это более элегантно??

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

Ответ №1:

Я бы пошел:

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

Таким образом, вы можете извлечь весь CSS из вашего JS.

Ответ №2:

вы можете написать:

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

Ответ №3:

По крайней мере, вы можете избежать избыточных поисковых запросов:

 $("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 селектор:

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

Обратите внимание, что в отличие от :nth-child , :lt индексы 0 основаны на, и поэтому приведенное выше соответствует первым трем элементам ( 0 , 1 и 2 ).

Ответ №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");

Если это должно быть сделано для всех элементов в списке, то, возможно, вы могли бы использовать each метод для элемента списка. Что-то вроде этого может помочь:

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