2010-11-18 12 views

答えて

14

第1の理由は、forループの悪用である。

jQueryの

var top = 0; 
$('.positionableDiv').each(function() { 
    $(this).css('top',top+'px'); 
    top = top + 30; 
}); 

...選択された要素をループするためのイディオムを持っているための方法aのよりよい理解のためにfor...inを見てください...ループ内のJavaScriptの作品、それが列挙されません。 .NETやJavaと同じように。

記事から:

それは配列を反復処理するための方法としてこれを使用したくてもよいが、これは悪い考えです。

+2

JavaScriptのループを誤って使用していることを指摘してくれてありがとうございました。ちょっと傷ついてしまいました – Yarin

1

ステートメント内の$( '。positionableDiv')は、多くのプロパティを持つjQueryオブジェクトです。あなたが望むのは、そのように行われていない一致した要素を反復することです。

試してみてください。

var top = 0; 
$('.positionableDiv').css('top', function(index, value) { 
    var cTop = top; 
    top = top + 30; 
    return cTop + 'px'; 
}); 
+0

Quintinが述べているように、.each()メソッドを使用すると、要素。 .css()メソッドは、コールバック関数を直接使用して処理する方法を提供するので、上記のように説明しました。おそらく、再生の変数が返される必要がある値の後に設定されているため、この場合は少しはっきりしません。 – Orbling

+0

あなたが提供している代替品をいただきありがとうございます。いつもすべてのオプションを知っておいてよろしいですか?ありがとうございました – Yarin

+0

@ヤリンどんな方法が適切かは、手元の状況によって異なります。 jQueryはコードを簡潔かつ明確にすることに優れているので、類似しているが代替メソッドが多数提案されていることを知ってうれしいです。 – Orbling

2

"(OBJ内のvarキー)のためには、" オブジェクトのメンバーを反復処理するのに好適です。プロトタイプが拡張されていない限り、ネイティブJavaScript配列で機能します。 jQueryオブジェクトはネイティブJavaScript配列として見えるかもしれませんが、 "for(in)"が失敗するわけではありません。

.eachを使用すると、jQueryオブジェクトを反復処理できます。 var top = 0;

$('.positionableDiv').each(function() { 
    $(this).css('top', top); 
    top += 30; 
}); 
+1

さらに、配列であっても、@Quintinが指摘しているように、for-inを使用したくない場合でも... – Yarin

6

他の回答が言及したようにマッチした要素のセットを反復処理するための正しい方法は、.eachです。 for..inループを使用しようとすると、jQueryオブジェクトのプロパティを反復処理し、一致した要素は反復処理しません。

他の.eachの例の一部を少し改善するために、top変数を省略して少しだけクリーンアップすることができます。 .eachの最初のパラメータは、一致する要素のセット内の要素のインデックスにあります。それぞれのステップで30を掛けて同じことを達成することができます。これがうまくいく

$('.positionableDiv').each(function(i) { 
    $(this).css('top', (i * 30) + "px"); 
}); 
3

var top = 0; 
for (var pdiv in $('.positionableDiv').get()) { 
    $(pdiv).css('top', top + 'px'); 
    top = top + 30; 
} 

は基本的に、あなたは要素の配列を取得するためにget()を使用して何のインクリメントとアップなしtop変数乱雑事はありません。

関連する問題