Петля через массив цветов с jQuery

Я пытаюсь дать каждому div другой цвет фона. Вот мой текущий код:Петля через массив цветов с jQuery

var imgColours = ['#FCCF94', '#C4C9E5', '#ADE3D6']; 

for (i=0; i < imgColours; i++) { 
     $('.img').css({backgroundColor: imgColours[0]}); 
}

Однако, я не совсем уверен, где это происходит не так. Я понимаю, что, наверное, слишком просто работать, но, на мой взгляд, это имеет смысл. Может ли кто-нибудь указать мне в правильном направлении?

источник

2013-12-13 Anonymous

'я j08691

Вы должны использовать imgColours.length

для цикла имеет ни малейшего представления, как долго массив иначе

Edit: Какой смысл в этом для цикла, если вы в конечном итоге с помощью imgColours[0] в любом случае? Если вы хотите зацикливать каждый цвет, используйте i вместо 0.

И в любом случае это не приведет к разному фону для каждого div.

Попробуйте выбрать по Classname (я буду использовать vanilla.js, потому что это просто)

var elements = document.getElementsByClassName("img"); 
for (var i = 0; i<elements.length; i++) { 
    var color = imgColours[Math.floor(Math.random()*imgColours.length)]; //get a RANDOM color change me if needed 
    elements[i].style.backgroundColor = color; 
}

источник

2013-12-13 21:31:10

Спасибо. У меня есть следующий код: http://jsfiddle.net/Uy2FX/6/ Я хочу, чтобы цвета проходили через общий массив блоков, а не просто останавливались после 3. Возможно ли это, используя% оператор? (i% something.length) –

Вы всегда назначая imgColours[0] для КАЖДОГО дел. Я думаю, что вы ищете imgColours[i]

Вам также понадобится использовать imgColours.length, чтобы сообщить вашему циклу, как долго будет массив.

Вы также захватываете все элементы HTML с классом img, так что каждый раз они будут изменять их все.

Чтобы захватить каждый элемент отдельно, вы можете использовать селектор CSS nth-of-type. В основном вы можете просто сделать что-то вроде

$(".img:nth-of-type(" + i + ")")

источник

2013-12-13 21:32:38

Aaah, спасибо. Что я должен использовать, чтобы захватить каждый img отдельно? –

@tmyie Я обновил свой ответ с помощью селектора 'nth-of-type'. –

В коде есть некоторые ошибки.

Это, вероятно, что вы хотели сделать:

// V1 : Basic 
var imgColours = ['#FCCF94', '#C4C9E5', '#ADE3D6']; 
for (var i=0; i < imgColours.length; i++) { 
    $('.img:eq('+i+')').css({backgroundColor: imgColours[i]}); 
}

Но если вы хотите, чтобы получить случайный цвет из вашего массива, для любого числа дивы, а также оптимизации кода JQuery немного для лучшей производительности :

// V2 : random colors 
var $imgs = $('#boxes1').find('.box'), 
    imgsCount = $imgs.length, 
    coloursCount = imgColours.length; 

for (var i=0; i < imgsCount; i++) { 
    var rnd = Math.floor(Math.random() * coloursCount), 
     color = imgColours[rnd]; 
    $imgs.eq(i).css({backgroundColor: color}); 
}

Или, если вы хотите проходной цвета после заказа массива, просто изменить цикл:

// V3 : sequential colors 
// Add V2 variables here 

for (var i=0; i < imgsCount; i++) { 
    var color = imgColours[i%coloursCount]; 
    $imgs.eq(i).css({backgroundColor: color}); 
}

ОБНОВЛЕНО скрипку: http://jsfiddle.net/Uy2FX/12/

Для некоторых очень простых советов по JQuery селекторы производительности: http://www.sitepoint.com/efficient-jquery-selectors/

источник

2013-12-13 22:04:47 taseenb

Как насчет этого?

var ec = 0; 
var i = 0; 
for(ec; ec < elements.length; ec++, i++) { 
    elements[ec].style.backgroundColor = imgColours[i]; 

    if(i == (imgColours.length - 1)) i = -1; 

}

http://jsfiddle.net/y2dq3/

источник

2013-12-13 22:22:27

Петля через массив цветов с jQuery

ответ

Смежные вопросы