# .each()

所属分类：杂项 > 集合操作 | 遍历 英文文档：.each()

## .each( function(index, Element) )返回: jQuery

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

- #### 添加的版本: 1.0.each( function(index, Element) )

  - function(index, Element)
    类型: Function()
    为每个匹配元素执行的一个函数。

`.each()` 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 `this` 总是指向这个元素。

假设页面上有这样一个简单的无序列表。

1 2 3 4 |
    <ul>    <li>foo</li>    <li>bar</li></ul>

你可以选中并迭代这些列表：

1 2 3 |
    $( "li" ).each(function( index ) {  console.log( index + ": "" + $(this).text() );});

列表中每一项会显示在下面的消息中：

0: foo
1: bar

我们可以通过返回 `false`以便在回调函数内中止循环。

注意: jQuery的方法，返回一个jQuery对象遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的`.each()`方法：

1 2 3 4 5 6 7 |
    // The .each() method is unnecessary here:$( "li" ).each(function() {  $(this).addClass( "foo" );}); // Instead, you should rely on implicit iteration:$( "li" ).addClass( "bar" );

## 例子:

#### Example: 遍历三个div并设置它们的color属性。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
    <!DOCTYPE html><html><head>  <style>  div { color:red; text-align:center; cursor:pointer;        font-weight:bolder; width:300px; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <div>Click here</div>  <div>to iterate through</div>  <div>these divs.</div><script>    $(document.body).click(function () {      $( "div" ).each(function (i) {        if ( this.style.color != "blue" ) {          this.style.color = "blue";        } else {          this.style.color = "";        }      });    });</script> </body></html>

#### Demo:

#### Example: 如果你不想要普通的DOM元素，而想获得的是jQuery对象的话，使用`$(this)`函数。例如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
    <!DOCTYPE html><html><head>  <style>  ul { font-size:18px; margin:0; }  span { color:blue; text-decoration:underline; cursor:pointer; }  .example { font-style:italic; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  To do list: <span>(click here to change)</span>  <ul>    <li>Eat</li>    <li>Sleep</li>     <li>Be merry</li>  </ul><script>    $( "span" ).click(function () {      $( "li" ).each(function(){        $( this ).toggleClass( "example" );      });    }); </script> </body></html>

#### Demo:

#### Example: 你可以使用 'return' 来提前结束 each() 循环。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
    <!DOCTYPE html><html><head>  <style>  div { width:40px; height:40px; margin:5px; float:left;        border:2px blue solid; text-align:center; }  span { color:red; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <button>Change colors</button>  <span></span>  <div></div>  <div></div>   <div></div>  <div></div>  <div id="stop">Stop here</div>  <div></div>   <div></div>  <div></div><script>    $( "button" ).click(function () {      $( "div" ).each(function ( index, domEle) {        // domEle == this        $( domEle ).css( "backgroundColor", "yellow" );        if ( $(this).is( "#stop" ) ) {          $( "span" ).text( "Stopped at div index #" + index );          return false;        }      });    }); </script> </body></html>

#### Demo: