盘点用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(){}); 其 ...
随机推荐
- C++ 三消游戏基本实现
最近在研究三消算法,我想试试在完全不借助网络资源的情况下搞定这个东西,所以有些地方可能不是最优的. 代码留此备忘. 1. 3x_desk_event.h 1 #pragma once 2 3 #ifn ...
- CVPR2021| TimeSformer-视频理解的时空注意模型
前言: transformer在视频理解方向的应用主要有如下几种实现方式:Joint Space-Time Attention,Sparse Local Global Attention 和Axial ...
- 脱壳入门----常见的寻找OEP的方法
一步直达法 所谓的一步直达法就是利用壳的特征.壳一般在执行完壳代码之后需要跳转到OEP处,而这个跳转指令一般是call ,jmp ,push retn类型的指令,而且因为壳代码所在的区段和OEP代码所 ...
- 通过CRM系统实现工作流程自动化
灵活运用CRM系统所拥有的自动化功能模块,是公司在快速发展和降低成本的关键保障.不管您的公司规模的大小,您企业的工作流程都必须遵照相同的流程反复操作.这种反复的工作是一个效率黑洞,长久以往会导致人力资 ...
- Linux_yum工具基本概述
一.什么是yum 1️⃣:yum是yellowdog update manager的简称,它能够实现rpm管理的所有操作,并能够自动解决各rpm包之间的依赖关系. 2️⃣:yum是rpm的前端工具,是 ...
- Lombok 插件安装和使用
引言 以前的 Java 项目中,充斥着太多毫无技术含量的代码,比如类属性的 getter/setter/toString 方法,还有就是异常处理.I/O 流的关闭操作等.这些样板代码虽然可以通过 ID ...
- 06丨MongoDB基本操作
使用 insert 完成插入操作 操作格式: db.<集合>.insertOne(<JSON对象>) db.<集合>.insertMany([<JSON 1& ...
- SUSE12 网卡配置、SSH远程配置、解决CRT密钥交换失败，没有兼容的加密程序
安装好SUSE系统后发现网卡配置与Centos有些差异,多网卡的同学可以参考一下(我的是双网卡) SUSE系统默认第一块网卡自动获取IP,如果是多网卡,需要手动配置,由于我的第一个网卡获取正确无需更改 ...
- 10.10 traceroute：追踪数据传输路由状况
traceroute命令 用于显示网络数据包传输到指定主机的路径信息,追踪数据传输路由状况.默认数据包大小是60字节(IPv4)或80字节(IPv6),用户可另行设置.它与Windows下的trace ...
- windows server 2008 rdp停止服务 - windows server 2012 R2 远程桌面授权模式尚未配置，远程桌面服务将在120天内停止工作
目录 问题现象 增长rdp服务可使用时长的配置 Via & reference: 问题现象 windows server 2008作为测试环境跳板机,但是没有配置官方的rdp授权,限制用户登录 ...