1

I'm trying to change width of the divs. But $(div#i) is not true. How can i do that?

<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>
4

2 回答 2

11

选择器应该是字符串，并且您不需要“div”，因为 id 必须是唯一的。此外，正如评论中提到的，严格数字的 id 仅在 HTML5 中有效，因此如果您希望它在旧浏览器上始终如一地工作，我建议使用data-index我在下面发布的方法。

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

我也会使用数组文字语法。

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回调中，而您在示例中没有这样做。

于 2012-11-26T16:54:18.207 回答
2

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

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

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

于 2012-11-26T16:56:55.757 回答