• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • each()

    遍历一个jQuery对象,为每个匹配元素执行一个函数。

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

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

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

    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
    

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

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

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

    0: foo
    1: bar

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

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

    // The .each() method is unnecessary here:
    $( "li" ).each(function() {
      $(this).addClass( "foo" );
    });
     
    // Instead, you should rely on implicit iteration:
    $( "li" ).addClass( "bar" );
    

    例子:

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { color:red; text-align:center; cursor:pointer;
            font-weight:bolder; width:300px; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    
    Click here
    to iterate through
    these divs.

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

    <!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://www.lanmper.cn/static/js/jquery-3.5.0.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>
    
    To do list:(click here to change)
    • Eat
    • Sleep
    • Be merry

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width:60px; height:60px; margin:5px; float:left;
            border:2px blue solid; text-align:center; }
      span { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    
    Stop here

    下篇:addBack()