複数のdiv idを繰り返し処理する

Question

私は90個の個別divボックスを表示するサイトを作成しようとしていますが、 は年齢番号の入力を促します。その回答を使用して、90のうちの回答量を網羅します。

最後のfor-loopでdivを取得してdivを反復する方法はありますか？

 for(i = 0; i < 90; i++) { 
     $('body').append('<div id="div'+ i +'" />'); 
     }; 

    var answer = prompt("Whats your age"); 

     for (i = 0; i <= answer; i += 1){ 
     // how can i get this $('#div') below to iterate through the divs? 
     $('#div').css({ "background-color": "red"}); 

     } 

おかげでみんな

Answer 1

代わり

$('#div').css({ "background-color": "red"}); 

のは

$('#div' + i).css({ "background-color": "red"}); 

DEMO

Answer 2

がトイレを持って試してみてくださいkで.slice()。

あなたのコードでは、そのようになります。

for(i = 0; i < 90; i++) { 
    $('body').append('<div class="box" />'); 
}; 

var answer = prompt("Whats your age"); 

$('div.box').slice(0, answer).css({ "background-color": "red"}); 

Answer 3

スカンダKhoslasの答えは正しいですが、必要な数だけdivを作るためにあなたのコードをリファクタリングし、すぐにそれらのスタイルでした！ここで

var answer = prompt("Whats your age"); 

for (i = 0; i <= answer; i++) { 

    $('<div id="div' + i + '" />') 
     .appendTo('body') 
     .css({ 
      "background-color": "red" 
     }); 

} 

は例です：これを解決するhttps://jsfiddle.net/uc2f2qdq/

Answer 4

もう一つの方法は、jQueryのフィルタ方式を使用することです。もし上記のコードで

$("div[id^='div']").filter(function(index) { 
    return index < answer; 
}).css({ 
    "background-color": "red" 
}); 

id属性を持つすべてのdiv年代を取得し、divのテキストで始まります。次に、これらの結果をすべてインデックスでフィルタリングします。フィルタメソッドの内部ループの現在のインデックスが返される値より小さい場合、要素は赤い背景を取得します。

フィルタドキュメント：http://api.jquery.com/filter/

セレクタまたは に一致するものにマッチした要素のセットを減らし、関数のテストに合格。

これはIDのあるDOMのdiv要素を検索するので、これは最良の答えではありません。パフォーマンスを向上させるには、特定のIDを持つコンテナの下など、検索を絞り込む必要があります。

最後に重要なことは、ここには大声があります。 DEMO

EDIT約ほとんど忘れました。ユーザーの回答に対する条件チェックを導入する必要があります。たとえば、応答が有効な整数であった場合、範囲内にある場合（0,90）、または操作がキャンセルされた場合。