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 标签中。这可以按照我想要的方式工作，但是我觉得可以将其压缩为一个功能，但是我不确定如何到达那里。任何示例或描述性帮助将不胜感激。谢谢..

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 选择器缓存在titlesvar 中，这样我就可以通过$('#headlines .title')选择器访问所有匹配的元素，而无需为每次迭代创建一个新的 jQuery 对象，这提供了良好的性能提升。

接下来，我遍历所有匹配的元素，即从索引 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);
}

.eachjQuery 方法也非常不言自明，取自 jQuery API 站点：

描述：遍历一个 jQuery 对象，为每个匹配的元素执行一个函数。

所以我用 . 创建了一组 DOM 元素，$('#headlines .title')并用.each. 作为参数传递的函数将对选择器匹配的每个元素执行，因此，我在迭代中创建一个带有当前元素的 jQuery 对象$(this)- 并将相应的标题索引附加到它。.each的索引是基于 0 的，以及 JS 中几乎所有索引数组（类似）结构。

于 2012-07-04T00:57:33.653 回答