2010-10-11 6 views
2

У меня есть коллекция дочерних div внутри родительского div, дочерние div's генерируются динамически и все имеют одно и то же имя класса.Применить цвет фона с помощью jquery

Мой вопрос заключается в том, как применять различные цвета фона для каждого ребенка DIV с помощью Jquery пример кода ниже

<div id="someid"> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
</div> 

Здесь я хочу, чтобы применить цвет фона для каждого ребенка DIV (класс = «бруски»)

Заранее спасибо.

+3

ли цвет означал совершенно случайным? – Marko

ответ

9

Что-то вроде этого:

var colors = ["f00", "0f0", "00f", "ff0", "0ff", "f0f"]; 

$('#someid .bar').each(function(i) { 
    $(this).css('background-color', '#'+colors[i % colors.length]); 
}); 

Для получения случайных цветов, вы можете использовать это:

function randomColor() { 
    return 'rgb('+ 
     Math.round(Math.random()*255)+', '+ 
     Math.round(Math.random()*255)+', '+ 
     Math.round(Math.random()*255)+')' 
} 

$('#someid .bar').each(function(i) { 
    $(this).css('background-color', randomColor()); 
}); 

Демо:

http://jsbin.com/eqoyi4

+1

Я бы порекомендовал известную палетку, вот что я использую: 'var colors = [" # 5179D6 "," # 66CC66 "," # EF2F41 "," # FFC700 "," # 61BDF2 "," # FF7900 " , «# 7588DD», «# 2F5E8C», «# 07BACE», «# BAE55C», «# BA1871», «#FFFFCC», «# BDE6FC», «# C7C7C7», «# ADA8FF», «# 2FA675», ]; ', видимый здесь: http://jsfiddle.net/nick_craver/SzRee/ –

+0

спасибо большое :) ... он работает ..... –

0
$('DIV.bar').each(function(i,e){ 
$(this).css('backgroundColor','rgb('+Math.round(255/i)+','+Math.round(255/i)+','+Math.round(255/i)+')'); 
}); 
+2

rount должен быть круглым, не так ли? –

+1

@Gaby: И 'math' должно быть' Math'. И это делает все divs, которые имеют класс bar, независимо от того, где они находятся, и объявляет аргумент, который он никогда не использует. Тогда есть ошибка «разделить на нуль». Но кроме * этого * ... –

+0

@ T.J.Crowder, действительно! –

1

Вопрос уже ответил Я предполагаю, но в любом случае; если вы хотите, чтобы отобразить оттенки определенного цвета (#ffcc33 в данном примере):

$(document).ready(function() { 
    $('.bar').each(function(i) { 
     var j = $('.bar').length; 
     $(this).css('background-color', 'rgb(' + 
      Math.floor(0xff/j * (i + 1)) + ', ' + 
      Math.floor(0xcc/j * (i + 1)) + ', ' + 
      Math.floor(0x33/j * (i + 1)) + 
     ')'); 
    }); 
}) 

http://www.jsfiddle.net/BEcvG/

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