jQuery 之遍历

2020-07-07 21:03:51 作者：互联网

1、jQuery对象.each(callback)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>遍历</title>
  <script src="js/jquery.js">
  </script>
  <script type="text/javascript">
    $(function(){
      var wifes =$("#wife li");
      wifes.each(function(index,obj){
        //index:就是元素在集合中的索引
                //obj：就是集合中的每一个元素对象
        //this：集合中的每一个元素对象
        alert(index+":"+$(obj).html());
      });
    });
  </script>
</head>
<body>
  <ul id="wife">
    <li>加藤惠</li>
    <li>斋藤飞鸟</li>
    <li>西野七濑</li>
    <li>石原里美</li>
    <li>亚丝娜</li>
  </ul>

</body>
</html>

2、$.each(obj,callback)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>遍历</title>
  <script src="js/jquery.js">
  </script>
  <script type="text/javascript">
    $(function(){
      var wifes =$("#wife li");
      //   //this：集合中的每一个元素对象
      $.each(wifes,function(index){
        alert(index+":"+$(this).html());
      });
    });
  </script>
</head>
<body>
  <ul id="wife">
    <li>加藤惠</li>
    <li>斋藤飞鸟</li>
    <li>西野七濑</li>
    <li>石原里美</li>
    <li>亚丝娜</li>
  </ul>

</body>
</html>

3、for ...of

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>遍历</title>
  <script src="js/jquery.js">
  </script>
  <script type="text/javascript">
    $(function(){
      var wifes =$("#wife li");
      for (wife of wifes) {
        alert($(wife).html());
      }
    });
  </script>
</head>
<body>
  <ul id="wife">
    <li>加藤惠</li>
    <li>斋藤飞鸟</li>
    <li>西野七濑</li>
    <li>石原里美</li>
    <li>亚丝娜</li>
  </ul>

</body>
</html>

标签：jQuery,index,遍历,obj,wife,function,each,wifes
来源： https://www.cnblogs.com/zero-vic/p/13263164.html

jQuery 之 遍历

jQuery 之遍历