Question

我正在尝试更改div的宽度。但$（div＃i）不是真的。我怎么能这样做？

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    var things = new Array();
        things[0] = 13; things[1] = 26; things[2] = 39;

    for(var i=0;i<things.length;i++)
            $(div#i).css("width",things[i]*100);
</script>

</head>

<body>
<div id="0" style=" width: 300px; height:20px; margin-left: 25px; padding-left: 15px; background-color: #900"> </div> <br>
<div id="1" style=" width: 300px; height:20px; margin-left: 25px; padding-left: 15px; background-color: #900"> </div> <br>
<div id="2" style=" width: 300px; height:20px; margin-left: 25px; padding-left: 15px; background-color: #900"> </div>
</body>
</html>

Answer 1

选择器应该是字符串，并且您不需要'div'，因为ids必须是唯一的。另外，正如评论中所提到的那样，严格数字的ID仅在HTML5中有效，因此如果您希望在旧版浏览器上保持一致，我建议您使用我在下面发布的data-index方法。

$('#' + i).css("width",things[i]*100);

我还会使用Array文字语法。

var things = [13, 26, 39];

在id唯一性和兼容性方面，我真的建议你不要使用id，因为它在语义上没有用。

而不是<div id="..."，我会做<div data-index="..."并使用jQuery的css自动收集迭代。

$('[data-index]').css('width', function(){
    return things[$(this).data('index')] * 100);
});

但实际上，如果你在数组中div和它们的索引之间有一对一的关系，你也可以这样做，而且HTML中不需要任何额外的属性。

$('body > div').css('width', function(i){
  return things[i] * 100;
});

另外请记住，您需要在ready回调中包含所有这些内容，而您在示例中没有这样做。

Answer 2

除非我遗漏了什么，否则你可以这样做：

$('#' + i).css("width",things[i]*100);

因为您正在调用一个ID，该ID在页面上应该是唯一的。

Jquery选择器循环

2 个答案: