梳理下jQuery遍历each方法的应用-Web前端之家

作者:web前端    发布时间:2019-12-18 13:32     浏览次数 :

[返回]

翻开jQuery手册,我们可以查到each()方法是规定为每个匹配元素规定运行的函数。在实际应用中,each函数很方便,$.each ()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM , JSON 等等,在javaScript 开发过程中使用$each可以大大的减轻我们的工作量。接下来一起学习下:

return; // 退出循环(不满足,退出此次循环。下次满足条件,依然会走此循环)
return false; //退出函数(退出所有)

jQuery遍历each()方法,比较实用,比如遍历对象和数组,项目中经常会用到。今天下午总算有点自己的时间,闲余之时,突然想梳理下each()方法的基础知识,包括$.each 和$的区别,一起来学习下吧!

语法:

 一、

each方法为每个匹配元素规定要运行的函数,它能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等。在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

$.each(function

数组循环:

提示:返回 false 可用于及早停止循环。

index - 选择器的 index 位置;element - 当前的元素(也可使用 "this" 选择器)。

html:

web前端,一起来看下each()的基本语法。如下:

jQuery中的each的三种遍历方法 ,如下:

<div class="WPLeCaZ">
    账期:
    <div class="WPLeCa">
        201708    
        <div class="WPLDaImg WPLDaImg01"><div></div></div>  //下拉三角
    </div>
</div>
<ul class="WPLeCaTex GPDown01" style="display: block;"> <li>201708</li></ul>    //下拉框内容

语法

1、选择器+遍历

js

$.each(function
$.each{i就是索引值this表示获取遍历每一个dom对象});
$(function(){
    GPHeOne();   // 数组循环
RiTop();  //json对象,each循环
});
function GPHeOne(){     // for循环
    var OneArr  = ["201703","201704","201705","201706","201707","201708"].sort().reverse();   //倒序排序
    var OneArLi = " ";
    for(var i=0;i<OneArr.length;i++){
        OneArLi += "<li title="+OneArr[i]+">" + OneArr[i] + "</li>";
    }
    $(".GPDown05").html(OneArLi);
  $("#HOpt01").text(months[0]);   // 将排在第一位的账期默认显示在内容框中
}

参数

2、选择器+遍历

web前端 1

描述

$.each(function{index就是索引值domEle表示获取遍历每一个dom对象});

json对象获取循环:

function必需。为每个匹配元素规定运行的函数。

3、更适用的遍历方法

js

index - 选择器的 index 位置。

1)先获取某个集合对象2)遍历集合对象的每一个元素

function RiTop(){       //each循环
var OneArr = [];   var TwoArr = [];    var ThreeArr = [];
$.each(cmcfs, function(i, p){
    if(typeof(p.NAME) == "undefined" || typeof(p.ID) == "undefined"){return;    }
    if(p.CTYPE == '1'){    //等于1时,为一级分类
        OneArr.push(p);
    }else if(p.CTYPE == '2'){  //等于2时,为二级分类
        TwoArr.push(p);
    }else if(p.CTYPE == '3'){  //等于3时,为三级分类
        ThreeArr.push(p);
    }
});

// html结构同上
// 获取json对象数据 
// var TwoArr = [];  
    var TwoArLi = "<li>全部</li>";
    $.each(TwoArr, function(i, p){    
        TwoArLi += "<li title="+p.NAME+" data-id='"+p.ID+"'>" + p.NAME + "</li>";
// console.log(JSON.stringify(TwoArr));
    });
    $(".GPDown06").html(TwoArLi);
}

element - 当前的元素(也可使用 "this" 选择器)。

vard=$;$.each(d,function{d是要遍历的集合index就是索引值domEle表示获取遍历每一个dom对});

TwoArr里存放的虚假数据为:

实例分析

这里说到遍历对象和方法,有童鞋问过,$两种方法有什么区别呢?

[
    {
        "ID": "100100",
        "NAME": "政企直销经理",
        "CTYPE": "2"
    }, {
        "ID": "100200",
        "NAME": "政企直销代理",
        "CTYPE": "2"
    }, {
        "ID": "100300",
        "NAME": "公众直销经理",
        "CTYPE": "2"
    }, {
        "ID": "100400",
        "NAME": "公众直销代理",
        "CTYPE": "2"
    }, {
        "ID": "110100",
        "NAME": "自有厅",
        "CTYPE": "2"
    }, {
        "ID": "110200",
        "NAME": "专营店",
        "CTYPE": "2"
    }, {
        "ID": "110300",
        "NAME": "连锁店",
        "CTYPE": "2"
    }, {
        "ID": "110400",
        "NAME": "独立店",
        "CTYPE": "2"
    }, {
        "ID": "110500",
        "NAME": "便利点",
        "CTYPE": "2"
    }, {
        "ID": "120100",
        "NAME": "互联网自营",
        "CTYPE": "2"
    }, {
        "ID": "120200",
        "NAME": "互联网代理",
        "CTYPE": "2"
    }, {
        "ID": "120300",
        "NAME": "移动互联网自营",
        "CTYPE": "2"
    }, {
        "ID": "120400",
        "NAME": "移动互联网代理",
        "CTYPE": "2"
    }, {
        "ID": "120500",
        "NAME": "客服型电子渠道",
        "CTYPE": "2"
    }
]

用一些具体实例来分析each()方法的应用,这样更易学习,便记忆。

其实在针对不同的操作上,它们显示了各自的特点。

 

Eg1:each处理一维数组

$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

web前端 2

vararr1=["aaa","bbb","ccc"];$.each{alert;
$("input[name='ch']").each{if.attr==true){//一些操作代码}

 

alert将输出0,1,2