-1

さて、私はjQuery（またはJavascript全体、私には関係ありません。しかし、他のJavascriptフレームワークはありません）を使用して、ドキュメント内の特定のクラスを反復処理しようとしています。

私は疑問に思っています、それを行うためのjQuery固有の方法はありますか、それともJavascriptを使用する必要がありますか？

基本的に、クラスにはX個のインスタンスがあります。DOM内のクラスのすべてのインスタンスを反復処理し、増分ごとに、その要素に異なる色を割り当てます（おそらく、元のCSSが問題にならないようにdivにスタイルタグを挿入します）。合計5色になり、その時点で次の反復に最初の色が与えられ、行列が続行されます。

擬似コード：

for x in elements
elements[0].inserttag('style = "#color0"')
elements[1].inserttag('style = "#color1"')
elements[2].inserttag('style = "#color2"')
elements[3].inserttag('style = "#color3"')
elements[4].inserttag('style = "#color4"')
elements[5].inserttag('style = "#color5"')
Repeat for elements[6] and beyond, starting with color0
4

4 に答える 4

2 
var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];

$('.your_class').each(function(i) {
  $(this).css('color', colors[i  % colors.length]);
});

間隔を処理するには:

var i = 0,
    colors = ['red', 'blue', 'orange', 'green', 'black'];

function setColor() {
    $('.your_class').eq(i).css('color', colors[i % colors.length]);
    i++;
    setTimeout(function() {
        setColor();
    }, 2000)
}

setColor();

デモ

于 2012-06-11T17:10:41.173 に答える
1

オブジェクトを繰り返し処理するクラス名が「foo」の場合、次の jQuery を使用できます。

var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];
$(".foo").each(function(index, el) {
    el.style.color = colors[index % colors.length];
});

プレーンな JavaScript では、これも非常に簡単です。

var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];
var items = document.getElementsByClassName('foo');
for (var i = 0, len = items.length; i < len; i++) {
    items[i].style.color = colors[i % colors.length];
}

これらの色の値を一定の時間間隔で定期的に適用しようとしている場合 (この部分についての質問は明確ではありません)、次のようにすることができます。

var colors = ['color0', 'color1', 'color2', 'color3', 'color4', 'color5'];
var items = document.getElementsByClassName('foo');
var i = 0;
function nextColor() {
    if (i < items.length) {
        items[i].style.color = colors[i % colors.length];
        i++;
        setTimeout(nextColor, 2000);
    }
}
nextColor();
于 2012-06-11T17:11:46.120 に答える
1

色を配列にキャッシュして.each()から、各要素を反復処理するために使用できます。

var colors = ['red','white','blue','green','yellow'];
$('.someclass').each(function(i,v) {

    // i is the iteration count,

    $(this).css('color', colors[i % colors.length]);

});

...または同様のもの。

于 2012-06-11T17:11:58.640 に答える
0 
var colors = ['red', 'blue', 'orange', 'green', 'black'];
var index = 0;
function doIt(){
    $('.foo').css('color', colors[index++ % colors.length]);

}

setInterval(doIt, 500);​

ライブデモ

于 2012-06-11T17:12:16.487 に答える