《前端》jQuery-each遍历用法

最新推荐文章于 2020-09-17 09:54:11 发布

bellediao

最新推荐文章于 2020-09-17 09:54:11 发布

阅读量772

点赞数

分类专栏：前端 #jQuery 例子

本文链接：https://blog.csdn.net/bellediao/article/details/104571627

版权

前端同时被 3 个专栏收录

257 篇文章 1 订阅

订阅专栏

例子

18 篇文章 0 订阅

订阅专栏

#jQuery

12 篇文章 0 订阅

订阅专栏

定义和语法

each() 方法规定为每个匹配元素规定运行的函数。遍历一维数组、多维数组、DOM, JSON 等等，

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

$(selector).each(function(index,val));

$.each(遍历主体, function (index, val) { });//在纯js中,没有选择器，用到语法

function(index,val)--必选参数。为每个匹配元素规定运行的函数。

index - 选择器的当前索引，
val- 当前的元素值（也可使用 "this" 选择器）

例子：

1、依次输出<li>标签的内容。

<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.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>

这里$(this).text(),我之前没有写$,应是this属于dom对象，应该转成jQuery格式吧。

2、each处理一维数组：

    var arr = ["aa", "bb", "cc"];
    $.each(arr, function (i, val) {
        alert(i);//=>0,1,2
        alert(val);// =>aa,bb,cc
    });

3、each处理二维数组

    var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
    $.each(arr2, function (i, item) {
        alert(i);//=>0,1,2
        alert(item);//=>['a','aa','aaa']，['b','bb','bbb']，['c','cc','ccc']
    });

arr2为一个二维数组，item相当于取这二维数组中的每一个数组。item[0]相对于取每一个一维数组里的第一个值.
alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素

4、each处理将二维数组每个值都取出来

    var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
    $.each(arr, function (i, item) {
        $.each(item, function (j, val) {
            alert(j);//=>0,1,2,0,1,2
            alert(val);//=>a，aa，aaa，b，bb，bbb，c，cc，ccc
        });
    });

5、each处理json数据，这个each就有更厉害了，能循环每一个属性

    var obj = { one: 1, two: 2, three: 3 };
    $.each(obj, function (key, val) {
        alert(key);//=>one two three
        alert(val);//=>1,2,3
    });

6、ecah处理dom元素，此处以一个input表单元素作为例子。

    $.each($("input:hidden"), function(i,val){  
        alert(val);
        alert(i);
        alert(val.name);
        alert(val.value);   
    });
<!--html-->
    <input name="aaa"  value="111" />
    <input name="bbb"  value="222" />
    <input name="ccc"  value="333" />
    <input name="ddd"   value="444"/>

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将输出同样的结果

其他的遍历函数：（筛选、查找和串联元素）

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中之前的元素集添加到当前集合中。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	获得用于定位的第一个父元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。

bellediao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《前端》jQuery-each遍历用法

定义和用法each() 方法规定为每个匹配元素规定运行的函数。提示：返回 false 可用于及早停止循环。语法$(selector).each(function(index,element))参数描述 function(index,element) 必需。为每个匹配元素规定运行的函数。 index- 选择器的 index 位置 ...
复制链接

扫一扫