• jquery 之 $().each和$.each()


    一、选择器+遍历(dom操作)分为两种:

    第一种:

    $('div').each(function (i){

       i就是索引值

       this 表示获取遍历每一个dom对象

    });

    <!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>Document</title>
        <style type="text/css">
          *{
              margin:0;
              padding:0;
          }
          div{
              width:400px;
              border: 1px solid #000;
              height:400px;
              margin:50px auto;
          }
          ul{
              list-style:none;
          }
        
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
            </ul>
        </div>
    </body>
    </html>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $('div>ul>li').each(function(i){
          console.log(i);
      })
    
    </script>

    第二种:

    $('div').each(function (index,domEle){

     

       index就是索引值

     

      domEle 表示获取遍历每一个dom对象 //当前被选中的元素(也可以用this代替),如果用this代替,可以不写这个参数。

     

    });

    <!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>Document</title>
        <style type="text/css">
          div{
              width:550px;
              border:1px solid #000;
              overflow: hidden;
          }
          div p{
              width:100px;
              height:100px;
              background: red;
              float:left;
              margin-right:10px;
          }
        
        </style>
    </head>
    <body>
        <div>
            <p>0</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
        </div>
        <div>
           <p>0</p>
           <p>1</p>
           <p>2</p>
           <p>3</p>
           <p>4</p>
         </div>
         <div>
                <p>0</p>
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
         </div>
        
        
    </body>
    </html>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $('div').each(function(index,ele){
            $(this).children().eq(1).css('backgroundColor','pink');
        })
    
    </script>

    二、遍历$.each()   (对象遍历)

     

    1)先获取某个集合对象

     

    2)遍历集合对象的每一个元素

     

    var d=$("div");

     

    $.each(d,function (index,domEle){

     

      d是要遍历的集合

     

      index就是索引值

     

      domEle 表示获取遍历每一个dom对象

     

    });

    $.each([{name:"vico",email:"skfj@162.com"},{name:"holly",email:"shanhu@163.com"}],function(index,ele){
       alert('索引:'+index+'对应的值为:'+ele.name)
    })

    输出  vico    holly

    var arr1 = [ "one", "two", "three", "four", "five" ];
    $.each(arr1, function(){
    alert(this);
    });
    输出:one   two  three  four   five
    
    var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
    $.each(arr2, function(i, item){
    alert(item[0]);
    });
    输出:1   4   7
    
    var obj = { one:1, two:2, three:3, four:4, five:5 };
    $.each(obj, function(key, val) {
    alert(obj[key]);
    });
    输出:1   2  3  4  5
  • 相关阅读:
    Deltix Round, Summer 2021
    CF1558F Strange Sort 题解
    将文本复制到粘贴板上
    Mac安装2021ps
    腾讯云TDSQL-C云原生数据库技术
    腾讯云分布式数据库TDSQL再获认可
    T-TDSQL的核心技术
    TDSQL原创技术的出发点
    拓路前行-TDSQL追求极致体验的这一路
    TDSQL多集群下的自动化和交付
  • 原文地址:https://www.cnblogs.com/smivico/p/7833303.html
Copyright © 2020-2023  润新知