each_each用法 - CSDN
精华内容
参与话题
  • 遍历$.each()和$().each()用法

    千次阅读 2018-08-01 18:23:31
    jQuery $.each(obj,function(n,value) 遍历用法 对象的遍历 js 代码部分 <script type="text/javascript"> $(function() { var $tbody = $(&...

    jQuery $.each(obj,function(n,value) 遍历用法

    1. 对象的遍历

    js 代码部分

    <script type="text/javascript">
        $(function() {
            var $tbody = $("tbody");
            var html = "";
            //前提必须是对象,一般情况下,后台传过来json字符串,要使用相应的方法将其转化为对象(eval、str.parseJSON()、JSON.parse(str))。
            var obj = [{ "name": "张三", "password": "123456" },{ "name": "李四", "password": "asdfgh" }];
            //下面使用each进行遍历
            $.each(obj, function(index, item) {
                console.log(index,item);
                html += "<tr><td>" + item.name + "</td> <td>" + item.password + "</td></tr>";
    
            });
            $tbody.append(html);
        });
        </script>

    html 代码部分

    <body>
        <table>
            <thead>
                <tr>
                    <th>name</th>
                    <th>password</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
    1. 数组的遍历
    <script  type="text/javascript">
         $(function(){
           var tbody = "";
         //------------遍历数组 .each的使用-------------
           var anArray = ['mma','bba','gge'];
         $("#result").html("------------遍历数组 .each的使用-------------");
               $.each(anArray,function(n,value) {
                alert(n+' '+value);
               var trs = "";
                 trs += "<tr><td>" +value+"</td></tr>";
                  tbody += trs;
                });
              $("#project").append(tbody);
      });
      </script>
    

    $(selector).each(function(index,element))

    html部分文档
    
    <ul id="each_id">
    <li>Coffee</li>
    <li>Soda</li>
    <li>Milk</li>
    </ul>
    
    js遍历函数:
    
    function traversalDOM(){
    $("#each_id li").each(function(){
          alert($(this).text())
        });
    }

    • 在遍历DOM时,通常用$(selector).each(function(index,element))函数.
    • 在遍历数据时,通常用$.each(dataresource,function(index,element))函数。
    展开全文
  • Jquery的 each的使用 $.each()

    千次阅读 2018-08-21 18:10:05
    下面提一下each的几种常用的用法 1. each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); alert(i)将输出0...
    下面提一下each的几种常用的用法
      
    1.
    each处理一维数组
      var arr1 = [ "aaa", "bbb", "ccc" ];      
      $.each(arr1, function(i,val){      
          alert(i);   
          alert(val);
      });   
    alert(i)将输出0,1,2
    alert(val)将输出aaa,bbb,ccc
     
     
    2.
    each处理二维数组  
      var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
      $.each(arr, function(i, item){      
          alert(i);   
          alert(item);      
      });  
    arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
    item[0]相对于取每一个一维数组里的第一个值   
    alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
    alert(item)将输出为  ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
     
    对此二位数组的处理稍作变更之后
     var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
       $.each(arr, function(i, item){      
            $.each(item,function(j,val){
                alert(j);
                alert(val);
         }); 
    });    
     alert(j)将输出为0,1,2,0,1,2,0,1,2
     alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
     
     
    3.
     each处理json数据,这个each就有更厉害了,能循环每一个属性     
       var obj = { one:1, two:2, three:3};      
       each(obj, function(key, val) {      
            alert(key);   
            alert(val);      
       });   
    这里alert(key)将输出one two three
    alert(val)将输出one,1,two,2,three,3
    这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
    而这个val等同于obj[key]
     
    ecah处理dom元素,此处以一个input表单元素作为例子。
    如果你dom中有一段这样的代码
    <input name="aaa" type="hidden" value="111" />
    <input name="bbb" type="hidden" value="222" />
    <input name="ccc" type="hidden" value="333" />
    <input name="ddd" type="hidden"  value="444"/>
    然后你使用each如下
     $.each($("input:hidden"), function(i,val){  
         alert(val);
         alert(i);
         alert(val.name);
         alert(val.value);   
     });  
    那么,alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。   
    alert(i)将输出为0,1,2,3 
    alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
    alert(val.value);  将输出111,222,333,444,如果使用this.value将输出同样的结果
     
    4.
    如果将以上面一段代码改变成如下的形式  
    $("input:hidden").each(function(i,val){
        alert(i);
        alert(val.name);
        alert(val.value);       
    });
    
    5.项目中$.each();方法的使用
      $.each(result, function(index, temp) {
      typeStr += '<option value=' + temp.id + '>' + temp.name
      + '</option>';
      });
    
    实例:
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
       var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同
        $.each(_mozi,function(key,val){
           //回调函数有两个参数,第一个是元素索引,第二个为当前值
        alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);
    });
    </script>
    </head>
    
    <body>
    
    </body>
    </html>
    
     

     

    展开全文
  • each的用法

    千次阅读 2017-11-30 13:47:28
    1.数组中的each 复制代码 var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为:one,two,three,four var arr1 = [[1, 4, 3]

    1.数组中的each

    复制代码
    复制代码
    
     var arr = [ "one", "two", "three", "four"];     
     $.each(arr, function(){     
        alert(this);     
     });   
    //上面这个each输出的结果分别为:one,two,three,four    
        
    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
    $.each(arr1, function(i, item){     
       alert(item[0]);     
    });     
    //其实arr1为一个二维数组,item相当于取每一个一维数组,   
    //item[0]相对于取每一个一维数组里的第一个值   
    //所以上面这个each输出分别为:1   4   7     
      
      
    var obj = { one:1, two:2, three:3, four:4};     
    $.each(obj, function(i) {     
        alert(obj[i]);           
    });   
    //这个each就有更厉害了,能循环每一个属性     
    //输出结果为:1   2  3  4 
    复制代码

     

    2.遍历Dom元素中

    复制代码
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("li").each(function(){
          alert($(this).text())
        });
      });
    });
    </script>
    </head>
    <body>
    <button>输出每个列表项的值</button>
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Soda</li>
    </ul>
    </body>
    </html>
    复制代码

    依次弹出Coffee,Milk,Soda

     

     3.each和map的比较

    下面的例子是获取每一个多框的ID值;

    each方法:

    定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值;

    复制代码
    复制代码
    $(function(){
        var arr = [];
        $(":checkbox").each(function(index){
            arr.push(this.id);
        });
        var str = arr.join(",");
        alert(str);
    })
    复制代码
    复制代码

     

    map方法:

    将每个:checkbox执行return this.id;并将这些返回值,自动的保存为jQuery对象,然后用get方法将其转换成原生Javascript数组,再使用join方法转换成字符串,最后alert这个值;

    复制代码
    $(function(){
        var str = $(":checkbox").map(function() {
            return this.id;
        }).get().join();    
        alert(str);
    })
    复制代码

    当有需一个数组的值的时候,用map方法,很方便。

     

     4.jquery中使用each

    例遍数组,同时使用元素索引和内容。(i是索引,n是内容)

    代码如下:

    $.each( [0,1,2], function(i, n){
    alert( "Item #" + i + ": " + n );
    }); 
    例遍对象,同时使用成员名称和变量内容。(i是成员名称,n是变量内容)
    代码如下:
    $.each( { name: "John", lang: "JS" }, function(i, n){
    alert( "Name: " + i + ", Value: " + n );
    }); 

    例遍dom元素,此处以一个input表单元素作为例子。 
    如果你dom中有一段这样的代码 
    <input name="aaa" type="hidden" value="111" /> 
    <input name="bbb" type="hidden" value="222" /> 
    <input name="ccc" type="hidden" value="333" /> 
    <input name="ddd" type="hidden" value="444"/> 
    然后你使用each如下

    代码如下:
    复制代码
    $.each($("input:hidden"), function(i,val){
    alert(val); //输出[object HTMLInputElement],因为它是一个表单元素。
    alert(i); //输出索引为0,1,2,3
    alert(val.name); //输出name的值
    alert(val.value); //输出value的值
    }); 
    复制代码

     

    5.each中根据this查找元素

    实现效果”回复”两个字只有在鼠标经过的时候才显示出来

    复制代码
    <ol class="commentlist">
        <li class="comment">
            <div class="comment-body">
              <p>嗨,第一层评论</p>
              <div class="reply">
                <a href="#" class=".comment-reply-link">回复</a>
              </div>
            </div>
            <ul class="children">
              <li class="comment">
                <div class="comment-body">
                <p>第二层评论</p>
                <div class="reply">
                  <a href="#" class=".comment-reply-link">回复</a>
                </div>
              </div></li>
            </ul>
        </li>
    </ol>
    复制代码

    js代码如下

    $("div.reply").hover(function(){
      $(this).find(".comment-reply-link").show();
    },function(){
      $(this).find(".comment-reply-link").hide();
    });

    实现效果,验证判断题是否都有选择

    html

    复制代码
    <ul id="ulSingle">
        
                <li class="liStyle">
                    1.&nbsp;&nbsp;阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
                    <!--begin选项-->
                    <ul>
                        
                                <li class="liStyle2">
                                    <span id="repSingle_repSingleChoices_0_labOption_0">A         </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
                                    <input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>
                            
                                <li class="liStyle2">
                                    <span id="repSingle_repSingleChoices_0_labOption_1">B         </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
                                    <input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" /></li>
                            
                                <li class="liStyle2">
                                    <span id="repSingle_repSingleChoices_0_labOption_2">C         </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
                                    <input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
                            
                    </ul>
                    <!--end选项-->
                    <br />
                </li>
            
    </ul>
    复制代码

    js代码

    复制代码
            //验证单选题是否选中
            $("ul#ulSingle>li.liStyle").each(function (index) {
                //选项个数
                var count = $(this).find("ul>li>:checkbox").length;
                var selectedCount = 0
                for (var i = 0; i < count; i++) {
                    if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
                        selectedCount++;
                        break;
                    }
                }
                if (selectedCount == 0) {
                    $(this).find("label#selectTips").show();
                    return false;
                }
                else {
                    $(this).find("label#selectTips").hide();
                }
            })
    复制代码

     ps:传说中attr("property", "value");在部分浏览器中不管用可以用prop,如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");

     

    6.官方解释
    以下是官方的解释: 

    jQuery.each(object, [callback]) 

    概述 
    通用例遍方法,可用于例遍对象和数组。 

    不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。 

    参数 
    objectObject 
    需要例遍的对象或数组。 

    callback (可选)Function 
    每个成员/元素执行的回调函数。

    展开全文
  • JQ中$.each()方法的使用

    千次阅读 2019-04-01 09:25:09
    $.each()可以实现对数组,json和DOM结构等的遍历。 定义:以每一个匹配的元素作为上下文来执行一个函数。 注意点:$.each()中的this指的是DOM元素,而不是jQuery 对象,如果要获取jQuery 对象,需要使用 $(this) ...

    $.each()可以实现对数组,json和DOM结构等的遍历。

    定义:以每一个匹配的元素作为上下文来执行一个函数。

    注意点:$.each()中的 this 指的是DOM元素,而不是jQuery 对象,如果要获取jQuery 对象,需要使用 $(this)

    下面我们来看看它的应用方法:

    1.遍历一维数组

    var arr_1 = ['a','b','c'];

    $.each(arr_1,function(index,value){   //其中index是指数组的下标,value指相对应的值;

           console.log(index +" : " + value + "<br>");

    })

    输出:

    0 : a

    1 : b

    2 : c

    2.遍历二维数组

    var arr_1 = [

           ['a','b'],

           ['c','d'],

           ['e','f']

    ];

    $.each(arr_1,function(index,item){   //其中index是指数组的下标,item指相对应的数组;

            console.log(index +" : " + item);

    })

    输出:

    0 : a,b
    1 : c,d
    2 : e,f

    注:可以对遍历之后的每个数组再进行遍历。

    3.处理JSON

    var json_1 = {"name":"jim","age":"28"};

    $.each(json_1,function(key,value){   //其中key是json的key,value指相对应的值;

            console.log(key +" : " + value);

    })

    输出:

    name : jim
    age : 28

    4.处理DOM

    <input name="a" type="hidden" value="1" />

    <input name="b" type="hidden" value="2" />

    <input name="c" type="hidden" value="3" />

    <script>

    $.each($('input:hidden'),function(index,value){

    console.log(index+ ' : ' +value);

    /*

    0 : [object HTMLInputElement]

    1 : [object HTMLInputElement]

    2 : [object HTMLInputElement]

    */

    console.log(value.name+' : '+value.value);

    /*

    a : 1

    b : 2

    c : 3

    */

    })

    </script>

    6.还可以这样来使用:

    <img/><img/>

    <script>

    $("img").each(function(i){

    this.src = "test" + i + ".jpg";

    });

    </script>

    结果:

    <img src="test0.jpg" />, <img src="test1.jpg" />

     

    注意:你可以使用 'return' 来提前跳出 each() 循环。

    <button>点击改变颜色</button>

    <span></span>

    <div>0</div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div id="stop">4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <script>

    $("button").click(function () {

    $("div").each(function (index, item) {

    // item == this

    $(item).css("backgroundColor", "red");

    if ($(this).is("#stop")) {

    $("span").text("执行到第 :" + index + "行");

    return false;

    }

    });

    });

    </script>

    展开全文
  • $.each()

    千次阅读 2016-10-19 16:45:13
    通过它,你可以遍历对象、数组的属性值并进行处理。 使用说明 ...each函数根据参数的类型实现的效果不完全一致: 1、遍历对象(有附加参数) $.each(Object, function(p1, p2) {  this;
  • js 里面的each遍历

    千次阅读 2019-05-16 15:10:49
    each的用法 var arr = [ "one", "two","three", "four"]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为:one,two,three,four var arr1 = [[1, 4, 3], [4, 6, 6], [7...
  • forEach,$.each()以及$().each()的比较

    千次阅读 2018-09-10 20:25:55
    1.forEach是js中遍历数组的方法,如下 var arr=[1,2,3,4]; arr.forEach(function(val,index,arr){//val为数组中当前的值,index为当前值的下表,arr为原数组 arr[index]=2*val;...2.$.each()是jquery中...
  • $().each和$.each的区别

    千次阅读 2018-09-28 22:59:36
    1.$(selector).each(function(index,element)) 2.$.each(dataresource,function(index,element)) 接下来就对这两个函数做深入的探讨: 1.$(selector).each(function(index,element)) 作用:在dom处理上面用的较...
  • JS each遍历详细解释(全)

    万次阅读 2018-02-02 10:01:33
    1】jquery的each()详细介绍 each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等,在javaScript开发过程中使用$each可以大大的减轻我们的工作量。 ----------------...
  • STL中的for_each()函数

    千次阅读 2017-06-29 20:50:03
    for_each()函数是C++ STL中的一个遍历函数,函数原型如下: for_each(InputIterator first, InputIterator last, Function functor); 一般情况下使用的时候都是把first作为容器遍历的起始点指针,last是容器的末尾。...
  • $(selector).each()和$.each()的区别

    千次阅读 2016-01-12 09:23:43
    $.each()和$(selector).each()的区别
  • jQuery 用each() 添加click事件

    万次阅读 2016-12-22 16:24:52
    代码如下:mydd = $('.plist');mydd.each(function(i){ $(this).click(function(){ //mydl.eq(i).hide("slow"); mydd.eq(i).css("background","url(images/m_1281702690741.gif) -1px cent
  • 在使用vue-router beforeEach钩子时,你也许会遇到如下问题: 源码: router.beforeEach((to, from, next) =&amp;gt; { //判断登录状态简单实例 var userInfo = window.localStorage.getItem('token'); if ...
  • java中的for-each循环

    千次阅读 2019-05-22 18:10:31
    Java支持一个简便的for循环,称之为for-each循环,不使用下标变量就可以顺序地遍历整个数组,例如,下面代码就可以显示数组myArray地所有元素: for (int i : myArray) { System.out.println(i); } 但是,当...
  • list_for_each()与list_for_each_safe()的区别

    万次阅读 2012-04-25 10:33:21
    list_for_each()的定义: /** * list_for_each - iterate over a list * @pos: the &struct list_head to use as a loop counter. * @head: the head for your list. */ #define list_for_each(pos, head) \ ...
  • jquery each的中断方法

    万次阅读 2014-07-19 11:02:10
    each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式  break----用return false;  continue --用return ture;
  • js中each用法及跳出each及if多层循环

    千次阅读 2016-05-19 13:55:01
    var save = function() { var obj = {}; var flag = true; $("[name^='pr']").each(function(index, item) { if (item.value == null || item.
  • 原生js实现jq的$.each()方法

    万次阅读 2017-09-06 00:14:58
    jq的$.each()方法: 语法:jQuery.each(object, [callback]) 回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略...
  • 错误如下: 解决方案:这个错误是端口占用导致。我们应找到此应用程序对应端口号的pid然后kill掉,即可ok  
  • MySQL触发器 trigger之for each row

    千次阅读 2014-10-24 10:24:53
    MYSQL没有基于语句的触发器,只有基于记录的行级触发器,也就是每影响一条记录都要触发一次。
1 2 3 4 5 ... 20
收藏数 1,298,343
精华内容 519,337
关键字:

each