1

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

2 に答える 2

11

セレクターは文字列である必要があり、IDは一意である必要があるため、「div」は必要ありません。また、コメントで述べたように、厳密に数字である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とそのインデックスの間に1対1の関係がある場合は、これを行うこともでき、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を呼び出しているため、これはページ上で一意である必要があります。

于 2012-11-26T16:56:55.757 に答える