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

用好的'{fashion} 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') var中缓存titles 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中的几乎所有索引数组（类似）结构。

将jQuery变量简化为循环函数

1 个答案: