0

私はjQueryにかなり慣れていないので、問題を解決するための最も実用的な方法を見つけようとしています。現在私が持っているものは機能しますが、それを単純化してより実用的にすることができることを私は知っています。方法がわかりません。

これが私のjQueryです...

var hl1 = data.headlines[0,0].headline;
var hl2 = data.headlines[0,1].headline;
var hl3 = data.headlines[0,2].headline;
var hl4 = data.headlines[0,3].headline;
var hl5 = data.headlines[0,4].headline;
var hl6 = data.headlines[0,5].headline;
var hl7 = data.headlines[0,6].headline;
var hl8 = data.headlines[0,7].headline;
var hl9 = data.headlines[0,8].headline;
var hl10 = data.headlines[0,9].headline;

$('#headlines .title').eq(0).append(hl1);
$('#headlines .title').eq(1).append(hl2);
$('#headlines .title').eq(2).append(hl3);
$('#headlines .title').eq(3).append(hl4);
$('#headlines .title').eq(4).append(hl5);
$('#headlines .title').eq(5).append(hl6);
$('#headlines .title').eq(6).append(hl7);
$('#headlines .title').eq(7).append(hl8);
$('#headlines .title').eq(8).append(hl9);
$('#headlines .title').eq(9).append(hl10);

そして、これが私のHTMLです...

<div id="headlines">
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
</div>

つまり、基本的に私が行っているのは、AJAX / JSONを介していくつかのデータをプルし、それらをこれらのh2タグに追加することです。これは私が望むように機能しますが、これを1つの関数に圧縮できるように感じますが、そこに到達する方法がよくわかりません。任意の例や説明的なヘルプをいただければ幸いです。ありがとう..

4

1 に答える 1

3

古き良きforループで：

var titles = $('#headlines .title');
for (var i=0; i<titles.length; i++)
    titles.eq(i).append(data.headlines[0,i].headline);

説明：
for Javascriptの反復の最も基本的な形式です。

$('#headlines .title')まず、変数にjQueryセレクターをキャッシュします。これにより、反復ごとに新しいjQueryオブジェクトを作成しなくてもtitles、セレクターによって一致するすべての要素にアクセスできるため、パフォーマンスが大幅に向上します。$('#headlines .title')

次に、一致したすべての要素、つまりインデックス0（最初の要素）から最後の要素まで（つまり、titles.length-1インデックスが0ベースであるため）を繰り返します。整数を使っているのi<titles.lengthと同じ部分なi<=titles.length-1ので、見た目も良く、パフォーマンスも良いものを選びました。

jQueryオブジェクトのプロパティはメソッド.lengthと同じ値を返すことに注意してください。ただし、ドキュメントにあるように、関数呼び出しのオーバーヘッドがないため、このプロパティが推奨されます。.size().length

この部分の残りの部分は自明です。.eq()メソッドはセレクターをフィルターtitles処理して、現在反復しているインデックスを持つアイテムのみを返します。このようにdata.headlinesして、まったく同じインデックスを持つアイテムに。を追加できますdata.headlines[0,i].headline。

またはjQueryの.each反復で：

$('#headlines .title').each(function(i) {
    $(this).append(data.headlines[0,i].headline);
}

jQuery APIサイトから取得した、.eachjQueryメソッドも非常に自明です。

説明： jQueryオブジェクトを反復処理し、一致した要素ごとに関数を実行します。

そこで、を使用してDOM要素のセットを作成し、を使用し$('#headlines .title')てそれらを反復処理します.each。パラメーターとして渡された関数は、セレクターによって一致する要素ごとに実行されるため、反復で現在の要素を使用してjQueryオブジェクトを作成し$(this)、対応する見出しインデックスを追加します。.eachのインデックスは0ベースであり、JSの実質的にすべてのインデックス付き配列（のような）構造です。

于 2012-07-04T00:57:33.653 に答える