盘点用jQuery框架实现“for循环”的四种方式！
摘要：分享在jQuery高级开发中对元素标签体的遍历常用的几种方法。
本文分享自华为云社区《盘点用jQuery框架实现“for循环”的四种方式！》，原文作者：灰小猿 。
今天继续来和大家分享在jQuery高级开发中对元素标签体的遍历常用的几种方法。
我们以一个案例的形式进行讲解，假如我们需要遍历的是如下ul标签中的li标签：
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
一、JS的遍历方式
首先第一种：利用js对象进行遍历。
利用js对象的方法进行遍历和我们平常的for循环遍历是一样的思路和解法，首先我们应该获取到需要遍历的元素标签，然后使用for循环方法对其中存在的标签进行遍历：下面以一个实例来进行讲解。
遍历四个li标签，并且弹出其中的内容，如果标签体内容是“上海”,则不弹出！
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用js中的for循环进行遍历
// 将获取到的li标签数组进行遍历
for (var i = 0; i < citys.length; i++) {
// 循环内容判断
if ("上海" == citys[i].innerHTML){
// break;
continue;
}
// 输出获取到的li标签中的内容
alert(i + citys[i].innerHTML);
}
});
二、JQuery的遍历方式
1. jQuery对象.each(callback)
使用该方法时需要在each()中实现function()方法，在function()方法中可以进行赋参数，也可以不赋参数，
首先我们来看不用赋予参数的一种，这种方法只能用于获取元素，而不能显示当前是第几个元素。如下：
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用jQuery对象的each进行遍历
// 利用this进行遍历
citys.each(function () {
// alert(this.innerHTML);
alert($(this).html());
});
});
其中的this表示：集合中的每一个元素对象
第二种是在function()中赋予参数：
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
利用这种方式可以回调函数返回值：如结束本次循环或结束整个循环吗，但是并不是使用break，
在这里使用的是return true/false
* false:如果当前function返回为false，则结束循环(break)。
* true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
实例代码：
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用jQuery对象的each进行遍历
// 利用给function赋值获取对象文本
citys.each(function (index,element) {
if ("上海" == $(element).html()){
return true; //结束本次循环
}
// js方式
// alert(index + ":" + element.innerHTML);
// jQuery方式s
alert(index + ":" + $(element).text());
});
});
2. $.each(object, [callback])
使用这种方法和上面那种方法相似，只不过最前面不是jQuery对象了，而是一个$符号,jQuery对象被放到了each()里面，但实现还是和上面一样的。如下：
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用$.each()方法
$.each(citys, function () {
alert($(this).html());
});
});
3. for..of方法
这种方法是jquery 3.0 版本之后提供的方式
语法格式是：for(元素对象 of 容器对象)
同样是容ul标签中取出li标签元素，代码如下：
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用for---of的方式
for (li of citys){
alert($(li).html())
}
});
最后附上面四种实现的完整源码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用js中的for循环进行遍历
// 将获取到的li标签数组进行遍历
for (var i = 0; i < citys.length; i++) {
// 循环内容判断
if ("上海" == citys[i].innerHTML){
// break;
continue;
}
// 输出获取到的li标签中的内容
alert(i + citys[i].innerHTML);
} // 利用jQuery对象的each进行遍历
// 利用this进行遍历
/* citys.each(function () {
// alert(this.innerHTML);
alert($(this).html());
});
*/
// 利用给function赋值获取对象文本
/*citys.each(function (index,element) { if ("上海" == $(element).html()){
return true;
}
// js方式
// alert(index + ":" + element.innerHTML);
// jQuery方式s
alert(index + ":" + $(element).text()); });*/ // 利用$.each()方法
/* $.each(citys, function () {
alert($(this).html());
});*/ // 利用for---of的方式
/* for (li of citys){
alert($(li).html())
}*/ }); </script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
盘点用jQuery框架实现“for循环”的四种方式！的更多相关文章
- Map集合遍历的四种方式理解和简单使用-----不能for循环遍历
Map集合遍历的四种方式理解和简单使用 ~Map集合是键值对形式存储值的,所以遍历Map集合无非就是获取键和值,根据实际需求,进行获取键和值 1:无非就是通过map.keySet()获取到值,然后 ...
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- jQuery绑定事件的四种方式：bind、live、delegate、on
1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...
- JavaWeb_(Struts2框架)Struts创建Action的三种方式
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- iOS－Core Foundation框架到Foundation桥接的三种方式
温故知新.勤总结,才能生巧!这次总结一下 :Core Foundation框架到Foundation桥接的三种方式 Foundation提供OC的基础类(像NSObject).基本数据类型等. Cor ...
- 教你三种jQuery框架实现元素显示及隐藏动画方式
摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...
- PHP数组循环遍历的四种方式
1.使用for循环遍历数组 conut($arr);用于统计数组元素的个数. for循环只能用于遍历,纯索引数组!!!! 如果存在关联数组,count统计时会统计两种数组的总 ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- jquery全局加载函数的几种方式;
1.使用javascript方式(function(){})(); 2.使用jQuery(function($) {}); 3.使用$(document).ready(function(){}); 其 ...
随机推荐
- 使用乌龟Git连接github
之前自己是在Gitee+乌龟Git来进行管理项目,因为特殊的需求,需要再Github+乌龟Git来进行管理项目,这盘博客主要讲解的就是这个. 安装环境 Git 安装参考链接:https://www.c ...
- vue.js在html页面中的使用
1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:
- 浅析DDD——领域驱动设计的理解
浅析DDD--领域驱动设计的理解 我觉得领域驱动设计概念的提出,是为了更清晰的区分边界.这里的边界包括业务边界和功能的边界,每个边界都包含具体的领域对象,当业务和功能的领域对象一一对应上之后,业务的变 ...
- 并发容器-CopyOnWriteSet
CopyOnWriteSet 该容器与CopyOnWriteArrayList相似,也是读取时不加锁,任意线程可以读.写入时加锁创建一个新的容器,然后写入新元素. 内部用CopyOnWriteArra ...
- Vue.js源码解析-从scripts脚本看vue构建
目录 1. scripts 脚本构建 1.1 dev 开发环境构建过程 1.1.1 配置文件代码 1.1.2 如何进行代码调试? 1.2 build 生产环境构建过程 1.2.1 scripts/bu ...
- mate桌面用户 root 自动登录lightdm.conf -20190520 方法【fedora 21】mate
桌面用户自动登录lightdm.conf -20190520 方法修改 /etc/lightdm/lightdm.conf 步骤:1 vim /etc/lightdm/lightdm.conf 解除 ...
- Git工作中的使用
Git工作中的使用 2019-01-16 14:29:31 雯雯木 阅读数 207更多 分类专栏: 自动化测试 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...
- ceph总结复习
一.ceph概念 Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展. 什么是块存储/对象存 ...
- # useradd -u 700 -g users vbird2
[root@linux ~]# ls -l /homedrwxr-xr-x 3 vbird1 vbird1 4096 Aug 30 17:33 vbird1[root@linux ~]# grep v ...
- linux中cat、more、less命令区别详解##less 最合适最好用，和vim一样好用
linux中cat.more.less命令区别详解 caoxinyiyi关注 0.0362018.07.02 15:46:17字数 641阅读 516 linux中命令cat.more.less均可用 ...