盘点用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(){}); 其 ...
随机推荐
- Docker安装和helloworld
0.基本简介(想直接实操,直接跳过去看1就好) Docker 在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等等,极大的简化了容器的创建和维护.使得 Docker 技术比虚拟机技术 ...
- Win64 驱动内核编程-27.强制读写受保护的内存
强制读写受保护的内存 某些时候我们需要读写别的进程的内存,某些时候别的进程已经对自己的内存读写做了保护,这里说四个思路(两个R3的,两个R0的). 方案1(R3):直接修改别人内存 最基本的也最简单的 ...
- Xshell6连Linux
一.安装 文件 链接: 提取码:8rmr 二.连Linux 名称填自己喜欢的.续之前,我们保持一样的名字.主机填IP,根据之前Linux填的静态IP去连接. 然后双击,连接 我们用最高权限,填root ...
- 正则表达式：（mysql）REGEXP
检索列prod_name包含文本1000的所以行 SELECT prod_name FROM products WHERE prod_name REGEXP '1000' ORDER BY prod ...
- php实现微信推送消息
一.<?phpnamespace Org\Weixin;class OrderPush{ protected $appid; protected $secrect; protected $acc ...
- liunx中文件夹不能删除怎么操作
1.运行rm -rf 文件名称 2.不能删除对应文件并且提示"rm: cannot remove './.user.ini': Operation not permitted" 操 ...
- Smss.exe加载win32k.sys过程总结
windows操作系统初始化 windows操作系统再初始化的过程中,当内核完全初始化而且各个组件也已经准备好后会加载一个个用户进程smss.exe(会话管理器),此进程会接着调用NtSetSyste ...
- 有关80386cpu在保护模式下的虚拟地址，线性地址和实际物理地址的关系
80386cpu是8086cpu的升级版,其具有32位的寄存器.(32根地址线和32根数据线) 8086cpu其是16位的寄存器但是其地址线有20根,其寻址范围为2的20次方,但是有一个16位的寄存器 ...
- NumPy之:ndarray中的函数
NumPy之:ndarray中的函数 目录 简介 简单函数 矢量化数组运算 条件逻辑表达式 统计方法 布尔数组 排序 文件 线性代数 随机数 简介 在NumPy中,多维数组除了基本的算数运算之外,还内 ...
- ES6中的箭头函数的语法、指向、不定参数
箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...