Select multiple divs and change their backgrounds - php

Question

I am creating multiple divs in a loop in php shown below.
<?php
for ($i=0; $i<=9; $i++)
{
for ($j=0; $j<=9; $j++)
{
echo "<div class=\"bg\" id=\"aaa".$i."\" style=\" position:absolute;top:".($i*10)."%;left:".($j*10)."%;\">
</div>";
}
}
?>
i want to select multiple divs (not all) and change their backgrounds using jquery. i cant seem to be able to figure out how to proceed with this

Answer 1

You can select div with id starting with aaa
$('div[id^=aaa]')

Answer 2

if you want to select yhe div's based on their index, you could use the nth-of-type selector:
divs = $('.bg:nth-of-type(1)');
divs.css('background-color','blue');
You can select multiple elements by adding them to the variable:
divs.add('.bg:nth-of-type(2)').add('.bg:nth-of-type(3)');
Note that these are css selectors so it may be an idea to simply do this in css:
.bg:nth-of-type(1),
.bg:nth-of-type(2),
.bg:nth-of-type(3){
background-color: blue;
}
also note you can use an expression inside the brackets to represent multiple values in a sequence.
.bg:nth-of-type(3n+1){ //will select every fourth div
background-color: blue;
}
Unless you can come up with a better criteria for which div's you want to change, this is probably the best way.
Source(s)
jQuery API - .add()
MDN - CSS :nth-of-type selector

Answer 3

This should do the trick:
var arrayDivs = $('div[id^=aaa]');
$.each(arrayDivs, function(){
$(this).css('background-color', '#000');
});
If you want to select multiple lists and not all "aaa"+integer ones, you will need to either know the numbers of those or you need to differ within your loops already.
More information would be awesome!

Answer 4

The "proper" way (if you can say that) would be to group the elements you want to assign common properties with appropriate classes. You can then manipulate them via CSS
So in essense, while looping in the above code :
for ($i=0; $i<=9; $i++) {
for ($j=0; $j<=9; $j++) {
$classes = 'bg';
if( [somelogic] ) { $classes .= ' bluefront'; }
if( [otherlogic] ) { $classes .= ' greenback'; }
echo "<div class=\"".$classes."\" id=\"aaa".$i."\" style=\" position:absolute;top:".($i*10)."%;left:".($j*10)."%;\"></div>";
}
}
and then, via CSS :
.bg.bluefront { color: blue; }
.bg.greenback.bluefront { background-color: green; color: white; }

Answer 5

//select all elements with class bg and add background image
$('.bg').css('background-image',"url('some_image.gif')");
better yet use css:
.bg {
background-image: url('some_image.gif');
}
if you only want some divs from the class bg:
$('.bg').each(function(index,element){
//your code here eg:
if(index == 2)
alert(index);
});