Question

我试图创建一个显示90个独立div框的网站，然后提示年龄数字。然后使用该答案在90的方框中回答阴影。

如何在最后一个for循环中获取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

Kartikeya 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 3

解决此问题的另一种方法是使用jQuery的过滤方法。

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

在上面的代码段中，您将获得所有div个具有id属性并以div文本开头的内容。然后按索引过滤所有这些结果。只要filter方法的内部循环中的当前索引小于answer，该元素将获得红色背景。

过滤文档：http://api.jquery.com/filter/

将匹配元素集减少到与选择器匹配的元素集通过功能测试。

从性能角度来看，这不是最好的答案，因为它在DOM中搜索具有id的div元素。为了获得更好的性能，您应该缩小搜索范围，例如在具有特定ID的容器下。

最后但同样重要的是，这里有一个问题。 DEMO

修改差点忘了。您应该为用户的答案引入一些条件检查。例如，如果答案是有效整数，如果它在边界（0,90），或者操作被取消。

Answer 4

查看.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"});

迭代多个div id

4 个答案: