jQuery 遍历的 each() 方法

最新推荐文章于 2023-11-16 22:16:57 发布

最新推荐文章于 2023-11-16 22:16:57 发布 · 231 阅读

文章标签：

#jQuery遍历 #each()方法 #JQeach()

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了 jQuery 中的 each() 方法，解释了其定义和用法，并通过实例展示了如何使用该方法遍历元素集合。强调了合理使用循环的重要性，以及在某些情况下原生 JavaScript 循环可能更优。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</body>
</html>

效果图：

定义和用法

each() 方法规定为每个匹配元素规定运行的函数。

提示：返回 false 可用于及早停止循环。

语法

$(selector).each(function(index,element))

参数	描述
function(index,element)	必需。为每个匹配元素规定运行的函数。 - index - 选择器的 index 位置 - element - 当前的元素（也可使用 "this" 选择器）

建议

正确处理循环,循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。

javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生。