盘点用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(){}); 其 ...
随机推荐
- android 资料
https://xfans.gitbooks.io/android-book/content/issue-39/Android%20dex%E5%88%86%E5%8C%85%E5%AF%BC%E8% ...
- Swift系列一 - 数据类型
如果你习惯了OC的语法,第一次接触Swift的语法可能会有点抗拒,因为Swift的语法有点怪.但如果你有前端的基础,学Swift可能会有点吃力,如果你有C++的基础可能会学得比较快点.不管你有什么样的 ...
- ERROR: Pool overlaps with other one on this address space
出现问题 配置了两个不同的docker-compose.yml,使用了相同的网段,导致了在运行第二个yml文件时命令行报错目标网段已存在,报错如下: Creating network "v2 ...
- 求曲线y=lnx在区间（2，6）内的一条切线，使得该切线与直线x=2,x=6及曲线y=lnx所围成的图形的面积最小。
求曲线y=lnx在区间(2,6)内的一条切线,使得该切线与直线x=2,x=6及曲线y=lnx所围成的图形的面积最小. 1.先画图. 2.设切点为(a,lna) (2<a<6) 3.切线方程 ...
- 【哲学角度看软件测试】要想软件“一想之美”，UI 测试少不了
摘要:软件测试的最高层次需求是:UI测试,也就是这个软件"长得好不好看". 为了让读者更好地理解测试,我们从最基础的概念开始介绍.以一个软件的"轮回"为例,下图 ...
- Keycloak 13 自定义用户身份认证流程（User Storage SPI）
Keycloak 版本:13.0.0 介绍 Keycloak 是为现代应用程序和服务提供的一个开源的身份和访问管理的解决方案. Keycloak 在测试环境可以使用内嵌数据库,生产环境需要重新配置数据 ...
- JAVA的基本介绍和JDK的安装
JAVA帝国 JAVA特性和优势 简单 面向对象 可复制性 高性能 分布式 动态性 多线性 安全性 健壮性 JAVA三大版本 javaSE:标准版(桌面程序.控制台开发) javaME(嵌入式开发) ...
- ScreenToGif： 屏幕录制神器
ScreenToGif:一款小众但很好用的屏幕录制神器 牛人干货 2020-01-07 00:23:08 今天干货君给大家介绍一款电脑屏幕录制神器-ScreenToGif . ScreenToGif ...
- 云计算OpenStack---云计算、大数据、人工智能（14）
一.互联网行业及云计算 在互联网时代,技术是推动社会发展的驱动,云计算则是一个包罗万象的技术栈集合,通过网络提供IAAS.PAAS.SAAS等资源,涵盖从数据中心底层的硬件设置到最上层客户的应用.给我 ...
- 第六章 XaaS和IT服务标准
从云计算(Cloud Computing)谈起 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这 ...