これはなぜ動作しないのか教えてもらえますか?jQueryセレクタを使用してDOM要素を反復処理する
var top = 0;
for (divToPosition in $('.positionableDiv')) {
divToPosition.css('top',top+'px');
top = top + 30;
}
これはなぜ動作しないのか教えてもらえますか?jQueryセレクタを使用してDOM要素を反復処理する
var top = 0;
for (divToPosition in $('.positionableDiv')) {
divToPosition.css('top',top+'px');
top = top + 30;
}
第1の理由は、for
ループの悪用である。
jQueryの
var top = 0;
$('.positionableDiv').each(function() {
$(this).css('top',top+'px');
top = top + 30;
});
...選択された要素をループするためのイディオムを持っているための方法aのよりよい理解のためにfor...inを見てください...ループ内のJavaScriptの作品、それが列挙されません。 .NETやJavaと同じように。
記事から:
それは配列を反復処理するための方法としてこれを使用したくてもよいが、これは悪い考えです。
JavaScriptのループを誤って使用していることを指摘してくれてありがとうございました。ちょっと傷ついてしまいました – Yarin
ステートメント内の$( '。positionableDiv')は、多くのプロパティを持つjQueryオブジェクトです。あなたが望むのは、そのように行われていない一致した要素を反復することです。
試してみてください。
var top = 0;
$('.positionableDiv').css('top', function(index, value) {
var cTop = top;
top = top + 30;
return cTop + 'px';
});
Quintinが述べているように、.each()メソッドを使用すると、要素。 .css()メソッドは、コールバック関数を直接使用して処理する方法を提供するので、上記のように説明しました。おそらく、再生の変数が返される必要がある値の後に設定されているため、この場合は少しはっきりしません。 – Orbling
あなたが提供している代替品をいただきありがとうございます。いつもすべてのオプションを知っておいてよろしいですか?ありがとうございました – Yarin
@ヤリンどんな方法が適切かは、手元の状況によって異なります。 jQueryはコードを簡潔かつ明確にすることに優れているので、類似しているが代替メソッドが多数提案されていることを知ってうれしいです。 – Orbling
"(OBJ内のvarキー)のためには、" オブジェクトのメンバーを反復処理するのに好適です。プロトタイプが拡張されていない限り、ネイティブJavaScript配列で機能します。 jQueryオブジェクトはネイティブJavaScript配列として見えるかもしれませんが、 "for(in)"が失敗するわけではありません。
.eachを使用すると、jQueryオブジェクトを反復処理できます。 var top = 0;
$('.positionableDiv').each(function() {
$(this).css('top', top);
top += 30;
});
さらに、配列であっても、@Quintinが指摘しているように、for-inを使用したくない場合でも... – Yarin
他の回答が言及したようにマッチした要素のセットを反復処理するための正しい方法は、.each
です。 for..in
ループを使用しようとすると、jQueryオブジェクトのプロパティを反復処理し、一致した要素は反復処理しません。
他の.each
の例の一部を少し改善するために、top
変数を省略して少しだけクリーンアップすることができます。 .each
の最初のパラメータは、一致する要素のセット内の要素のインデックスにあります。それぞれのステップで30を掛けて同じことを達成することができます。これがうまくいく
$('.positionableDiv').each(function(i) {
$(this).css('top', (i * 30) + "px");
});
:
var top = 0;
for (var pdiv in $('.positionableDiv').get()) {
$(pdiv).css('top', top + 'px');
top = top + 30;
}
は基本的に、あなたは要素の配列を取得するためにget()
を使用して何のインクリメントとアップなしtop
変数乱雑事はありません。
何をやっているのか、していないのですか? –
ループを入力しない – Yarin