Question

我在php中创建了一个循环中的多个div。如下所示。

 <?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>";
        }
 }
?>

我想选择多个div（不是全部）并使用jquery更改其背景。我似乎无法弄清楚如何继续这个

Answer 1

您可以选择ID为aaa

的div

$('div[id^=aaa]')

Answer 2

如果你想根据它们的索引选择div，你可以使用nth-of-type选择器：

divs = $('.bg:nth-of-type(1)');
divs.css('background-color','blue');

您可以通过将多个元素添加到变量中来选择它们：

divs.add('.bg:nth-of-type(2)').add('.bg:nth-of-type(3)');

请注意，这些是css选择器，因此在css中执行此操作可能是个主意：

.bg:nth-of-type(1),
.bg:nth-of-type(2),
.bg:nth-of-type(3){
    background-color: blue;
}

另请注意，您可以使用括号内的表达式来表示序列中的多个值。

.bg:nth-of-type(3n+1){ //will select every fourth div
    background-color: blue;
}

除非你能想出更好的标准来改变你想要改变的div，否则这可能是最好的方法。

<强>来源（S）

jQuery API - .add()
MDN - CSS :nth-of-type selector

Answer 3

这应该可以解决问题：

var arrayDivs = $('div[id^=aaa]');
$.each(arrayDivs, function(){
    $(this).css('background-color', '#000');
});

如果要选择多个列表而不是所有“aaa”+整数列表，则需要知道这些列表的编号，或者您需要在循环中有所不同。更多信息会很棒！

Answer 4

“正确”的方式（如果你可以这么说）将是你想要用适当的类分配公共属性的元素。然后，您可以通过CSS

操纵它们

所以在本质上，循环使用上面的代码：

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>";
  }
}

然后，通过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')");

更好地使用css：

.bg {
    background-image: url('some_image.gif');
}

如果你只想要bg类中的一些div：

$('.bg').each(function(index,element){
//your code here eg:
if(index == 2)
   alert(index);
});

选择多个div并更改其背景

5 个答案: