將jQuery變量簡化爲循環函數

Question

我對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標籤中。這是我想要的方式，但我覺得這可以被壓縮成一個功能，但我不確定如何到達那裏。任何示例或描述性幫助將非常感激。謝謝..

Answer 1

憑藉良好的醇」老式for循環：

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

解釋：
for是的Javascript迭代的最基本的形式。

首先，我在titles VAR緩存$('#headlines .title') jQuery選擇，這樣我可以訪問全部由$('#headlines .title')選擇匹配的元素，而無需爲每個迭代一個新的jQuery對象，它提供了一個良好的性能提升。接下來，我遍歷所有匹配元素，即從索引0（第一個元素）到最後一個元素（即titles.length-1，索引爲0-based）。 i<titles.length部分將與i<=titles.length-1相同，因爲我使用的是整數，所以我選擇了看起來更整潔並且性能更好的那個。

注意，jQuery的對象的.length屬性返回相同的值.size()方法，但.length是優選，因爲它不具有這樣的功能調用的開銷，因爲每documentation。

這部分的其餘部分是不言自明的.eq()方法過濾titles選擇只返回該項目與我此刻的迭代指數，這樣我可以追加data.headlines用同樣的指數它與data.headlines[0,i].headline。

或者使用jQuery .each迭代：

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

的.each jQuery的方法是非常不言自明的，以及，從jQuery API網站採取：

說明：遍歷一個jQuery對象，爲每個匹配的元素執行一個函數。

因此，我用$('#headlines .title')創建了一組DOM元素，並用.each遍歷它們。作爲參數傳遞的功能將用於由選擇器相匹配的每個元素被執行，所以，我創建具有在迭代的當前元素的jQuery - $(this) - 和對應的標題的索引附加到它。 .each的索引是基於0的，以及幾乎所有在JS中的索引數組（類）結構。