Jquery 选择器循环



我正在尝试更改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>

选择器应该是字符串,你不需要"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回调中,而您在示例中没有这样做。

除非我错过了什么,否则你可以做:

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

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

最新更新