Уникальное действие для отдельного элемента в .each()

Можно ли написать отдельный код для каждого результата в функции .each()?

Что я хотел бы сделать в примере, так это чтобы каждая позиция имела уникальный цвет. Можно ли это сделать в .each() ?

$(document).ready(function() {    
    $('li').each(function() {
        $(this).css('color', 'purple');
    }); 
// End it all    
});​

http://jsfiddle.net/rJGYL/

Изменить: Чтобы быть более кратким, можно ли добавить уникальный CSS для каждого элемента? Не только цвет, например, но, скажем, я хотел, чтобы первый элемент имел полужирный шрифт, а следующий элемент был курсивом...


jquery each
person Community    schedule 30.05.2012    source источник
comment
Что касается вашего редактирования: идея будет такой же. Создайте массив объектов со свойствами CSS и примените их к элементам через их индекс.   -  person Felix Kling    schedule 30.05.2012
comment
Да, с помощью CSS. Если вы не хотите, чтобы уникальный css отображался сразу, вы можете использовать jQuery просто для добавления класса активатора к некоторому родителю, который активирует все уникальные css, объявленные вами в вашем файле css.   -  person Esailija    schedule 30.05.2012
comment
Проверьте мой обновленный ответ. Вы также можете указать другие значения css. :)   -  person Prasenjit Kumar Nag    schedule 30.05.2012

Ответы (3)


arrow_upward
0
arrow_downward

да Вы можете сделать это, используя следующий код

$(document).ready(function() {
  var colors = ['black','red','purple','yellow']
    $('li').each(function(i) {
        $(this).css('color', colors[i]);
    });


// End it all    
});​

Рабочая скрипка

Поместите свои цвета в массив colors.

Обновить

Вы можете определить разные css для каждого li в массиве, подобном этому

$(document).ready(function() {
    var css = [{'font-weight':'bold','font-size':'25px','color':'red'}
               ,{'color':'purple'},{'color':'black'},{'color':'yellow'}]
    $('li').each(function(i) {
        $(this).css(css[i]);

    });


// End it all    
});​

Рабочая скрипка

Вы определили свойство css как пару 'key':'value' в массиве css объектов.

person Prasenjit Kumar Nag    schedule 30.05.2012
comment
Это сложнее, чем должно быть. Вы можете передать объект css напрямую: $(this).css(css[i]). Не нужно перебирать свойства. - person Felix Kling; 30.05.2012
comment
спасибо, я этого не знал. Обновление ответа. :) - person Prasenjit Kumar Nag; 30.05.2012

arrow_upward
5
arrow_downward 

$(document).ready(function() {

var colors = ['red','green', 'blue', 'pink']

    $('li').each(function(i) {
        $(this).css('color', colors[i]);
    });


// End it all    
});​

JSFiddle: http://jsfiddle.net/lucuma/aU4kr/

Вы можете использовать индекс в каждой функции для ссылки на массив. Если вам нужны дополнительные сведения о каждом из них, их можно найти здесь: http://api.jquery.com/each/.

person lucuma    schedule 30.05.2012
comment
Или более кратко: $('li').css('color', function(i) { return colors[i]; }). - person Felix Kling; 30.05.2012
comment
Я бы +1 Феликсу, если бы это был ответ за использование версии обратного вызова .css() - person Alnitak; 30.05.2012

arrow_upward
0
arrow_downward

Вы можете указать массив доступных цветов, а затем использовать индекс каждого элемента для выбора из этого массива:

http://jsfiddle.net/rJGYL/2/

$(document).ready(function() {
    var colors = ["purple", "red", "blue", "yellow"];

    $('li').each(function(index) {
        $(this).css('color', colors[index]);
    });


    // End it all    
});​
person Steve Greatrex    schedule 30.05.2012