1

我在 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 更改它们的背景。我似乎无法弄清楚如何进行此操作

4

5 回答 5

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，否则这可能是最好的方法。

来源

jQuery API - .add()
MDN - CSS :nth-of-type 选择器

于 2013-04-17T15:00:51.317 回答
2

您可以选择以 id 开头的 divaaa

$('div[id^=aaa]')
于 2013-04-17T14:26:42.773 回答
0

这应该可以解决问题：

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

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

于 2013-04-17T14:29:42.490 回答
0 
//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);
});
于 2013-04-17T14:45:44.960 回答
0

“正确”的方式（如果你可以这么说的话）是将要分配公共属性的元素与适当的类分组。然后，您可以通过 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; }
于 2013-04-17T14:39:04.093 回答