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

で始まる id の div を選択できますaaa

$('div[id^=aaa]')
于 2013-04-17T14:26:42.773 に答える
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 に答える
0

これでうまくいくはずです：

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

すべての「aaa」+整数のリストではなく、複数のリストを選択する場合は、それらの数を知るか、ループ内で既に異なる必要があります。より多くの情報は素晴らしいでしょう！

于 2013-04-17T14:29:42.490 に答える
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 に答える