jquery中each_如何在jQuery中使用each（）

最新推荐文章于 2022-12-03 21:52:12 发布

cunchi4221

最新推荐文章于 2022-12-03 21:52:12 发布

阅读量205

点赞数

文章标签： js javascript java python jquery ViewUI

原文链接：https://www.journaldev.com/5371/how-to-use-each-in-jquery

版权

jquery中each

In this post, we are going to discuss about jQuery each() method, which is one of the most important and mostly used traversing functions in jQuery.

在本文中，我们将讨论jQuery each()方法，这是jQuery中最重要且使用最广泛的遍历函数之一。

jQuery each（） (jQuery each())

This method lets you to iterate over the DOM elements of the jQuery object and executes a function for each matched element.
You have to pass a callback function to each() method which is executed for each selected element. The call back function is triggered in the context of the current DOM element, so you can use this keyword to refer the currently matched element. You can return false from the callback function to stop the loop early.

该方法使您可以迭代jQuery对象的DOM元素，并为每个匹配的元素执行一个函数。
您必须将回调函数传递给each（）方法，该方法针对每个选定的元素执行。回调函数是在当前DOM元素的上下文中触发的，因此您可以使用this关键字来引用当前匹配的元素。您可以从回调函数返回false，以尽早停止循环。

Here is the general syntax for using jQuery each() method:

这是使用jQuery each（）方法的一般语法：

selector.each(function)
选择器。每个（功能）

function is the call back method triggered for each matched element.This is a mandatory parameter for the each() method. function(index,element) takes two parameters , index and element.
index an integer value, which is the index of the selected element.
element is the selected element itself.

function是为每个匹配的元素触发的回调方法。这是each（）方法的必需参数。 function(index,element)具有两个参数index和element 。
index一个整数值，它是所选元素的索引。
element是所选元素本身。

jQuery each（）示例 (jQuery each() example)

Following example demonstrates the jQuery each() usage.

以下示例演示了jQuery each（）的用法。

<!doctype html>
<html>
<head>
<title>jQuery Traversing each</title>
<style>
    div {
      width: 40px;
      height: 50px;
      margin: 5px;
      float: left;
      border: 3px blue solid;
      text-align: center;
    }
    button{
      float: left;
    }    
    .highlight{
      background: yellow;
    } 
    span {
      color: red;
    }
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<button>Click Here</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop"> Stop</div>
<div></div>
<div></div>

<script>
$( "button" ).click(function() {
   $( "div" ).each(function( index,element ) {
      $( element ).text("index # "+index).addClass("highlight");
    if ( $( this ).is( "#stop" ) ) {
      $( "span" ).text( "Stopped at index #" + index );
      return false;
    }
  });
});
</script>

</body>
</html>

In this example, the each() is triggered on clicking the button. The each() takes a function(index, element) as an argument. The each() iterates over the selected div elements starting from the first index, that is from index 0. The function is executed for each selected div and changes the CSS style of the currently matched div.

在此示例中，单击按钮会触发each() 。 each（）采用一个function(index, element)作为参数。 each（）从第一个索引（即索引0）开始迭代选定的div元素。该函数针对每个选定的div执行，并更改当前匹配的divCSS样式。

This iteration stops when the function returns false. Here, is() method checks for an “id=stop” and the passed function returns false when the index is 4, which in turn stops the iteration.

函数返回false时，此迭代停止。在这里，is（）方法检查“ id=stop ”，并且当索引为4时，传递的函数返回false，这又停止了迭代。

You can click on below button to try it out yourself.

您可以单击下面的按钮尝试一下。

演示地址

I hope the jQuery each() usage is clear now. That’s all for now. We will discuss some more traversing techniques in the coming posts.

我希望jQuery each（）用法现在已经清楚了。目前为止就这样了。我们将在以后的文章中讨论更多的遍历技术。