Question

哪个是遍历<ul>列表并为每个<li>添加特定文本的最佳方式？我可以使用FOR循环，如：

for (i=0; i<$('li').length; i++){
   ('li').eq(i).text(bla bla)
}

Answer 1

您只需使用text()进行回调即可重复

$('li').text(function(i,v){
   // i - index of the element and v - old value 
   return 'bla bla';
   // -------^---- new value to update
});

例如：

var con = ["first", "second", "third", "fourth"];
$('li').text(function(i) {
  return con[i];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

在你的例子中，你不需要任何循环

$('li').text('blah blah')

将使用文字

更新每个li

Answer 3

是的。虽然each()具有简单的语法，但性能更差。不过，您应该一次选择一个DOM对象，然后使用该引用，如果DOM没有任何变化。否则jQuery将在每个循环中多次搜索DOM

var elements = $('li');
for (var i = 0; i < elements.length; i++){
   elements.eq(i).text(bla bla)
}

Answer 4

不，这太重了。请记住，每次调用$('li')时，jQuery都会查找页面中的所有<li>元素，并从中生成一个集合。因此，jQuery具有方法链接和迭代的精彩功能，这将有助于保持代码快速。对于迭代集合中的元素，您可以使用特殊的.each方法：

$('li').each(function(i) {
    $(this).text('element #' + i);
});

或者，如果您只需要将相同的文本设置为集合中的所有匹配元素，请使用应用于所选jQuery对象的.text方法：

$('li').text('same text');

哪个FOR循环是遍历元素的最佳方式？

4 个答案: