JQuery对象集合的四种遍历方式

10-jQuery-遍历children、parent、for、each、for...of等 上述代码表示:通过 $ 函数选择 container 元素,并使用 children() 方法获取它的所有子元素。然后使用 for...of 循环遍历所有子元素,并打印出它们的文本内容。需要注意的是,for...of 循环中的 element 变量是 DOM 元素,需要使用 $ 函数将其转换成 jQuery 对象才能进行相关操作。上述代码表示:使用 $ 函数选择所有 li 元素,并使用 each() 方法遍历它们。在示例代码中,使用 console.log() 打印每个 li 元素的索引和文本内容。 阅读详情

JQuery对象集合遍历在实际开发中是必不可少的,因为我们不仅仅要用JQuery的选择器来选择元素,重要的还要去修改属性等工作,但是,在修改之前要实实在在的去到jquery对象集合的具体元素,当然用途绝不仅仅如此,所以,在学习的过程中,对于jquery对象集集合的遍历,我总结了四种遍历方式:

在面是具体的代码,在代码文档中都有提示。

<span style="font-family: Arial, Helvetica, sans-serif;">$("#test3").click(function(){</span>
<span style="white-space:pre">		</span>var $objs=$("select option:selected");//【1】
<span style="white-space:pre">		</span>$.each($objs,function(i,n){<span style="white-space:pre">	</span>//【2】
<span style="white-space:pre">			</span>//window.alert($("select option:selected").text());//第一种方式
<span style="white-space:pre">			</span>//window.alert(n.value);//第二种方式
<span style="white-space:pre">			</span>//window.alert($(n).val());//第三种方式
<span style="white-space:pre">			</span>//window.alert($(this).val());//第四种方式
<span style="white-space:pre">		</span>})
});



为了表达简洁,没有给html的代码。【1】是表明在select中的option属性为选中值的集合,【2】遍历的算法采用的jquery自己的方式,即each的方法,分别给对象集合,和函数的两个参数,其中一个为索引,一个为对象,可以看出来:


1:最常用的一种方式,这个可以取出多个select标签的属性值。这是在直接指定

2:在遍历每个对象时来指定value。

3:这是jquery内在的方法来表示对象 元素值。

4:通过This的方式,这里function内可以不用参数。


Jquery的遍历其实只用学习一种就行,但是,还是要多了解一下的,对理解和操作代码有一定的好处


使用jQuery的each()方法进行遍历——实例与源代码 使用jQuery的each()方法可以方便地遍历集合中的元素,无论是数组、类似数组的对象还是DOM元素集合。本文提供了使用each()方法遍历数组和DOM元素集合的示例代码,希望能帮助你理解和使用该方法。其中一个常用的功能是使用each()方法迭代遍历集合中的元素。each()方法是jQuery提供的一个遍历方法,它允许我们对一个集合中的每个元素执行相同的操作。集合可以是由选择器返回的一组DOM元素,也可以是一个数组或类似数组的对象。表示要遍历的集合,可以是一个数组、类似数组的对象或DOM元素集合。 阅读详情

相关推荐

从入门到精通:jQuery遍历详解

jQuery是一种流行的JavaScript库,提供了很多方便快捷的方法来操作HTML元素和文档对象模型(DOM)。在本文中,我们将重点介绍jQuery中的遍历方法,并通过例子演示它们的使用。通过本文的介绍,相信您对jQuery的遍历操作有了更深入的了解。方法允许我们对一个jQuery对象中的每个元素执行自定义的函数。方法将当前匹配集合中的每个元素传递给一个函数,并返回包含函数返回值的新数组。它返回一个新的jQuery对象,其中包含符合条件的元素。它们返回一个新的jQuery对象,其中包含对应的兄弟元素。

Byte_O_O的博客 333

jQuery的遍历

jQuery对象本身就是数组对象,通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。 1. 原始方式遍历 语法 for(var i=0;i<元素数组.length;i++){ 元素数组[i]; } 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l

克豪的博客 991

深入解读ES8388寄存器:从录音到播放,如何用代码控制这颗音频Codec

本文深入解析ES8388音频编解码器的寄存器设置,从录音到播放的完整控制流程。详细介绍了寄存器架构、录音通道配置、播放通道优化以及直通(Bypass)模式的高级应用,帮助开发者通过代码精准控制这颗高性能音频Codec,解决实际开发中的音质问题。

weixin_30275415的博客 547

JQuery(五) -- JQuery对象的“遍历操作”

i < 容器对象长度;$.each(容器对象,function(index,ele){容器对象.each(function(index,ele){for(ele of 容器对象){

PUYALEI的博客 986

LM Studio Bionic:本地AI智能体从部署到实战完整指南

AI智能体作为能够自主规划、执行多步任务的人工智能系统,其核心原理在于结合大语言模型的推理能力与工具调用机制。通过状态保持和任务分解算法,智能体实现了从单次问答到持续协作的技术跃迁。在工程实践中,这种架构显著降低了复杂任务自动化的门槛,特别适用于数据敏感场景和定制化需求。以Tesla V100等专业硬件为例,本地部署能充分发挥其大显存优势,支持更高精度的模型量化格式。在实际应用层面,智能体可无缝集成到代码审查、文档生成等开发工作流中,而LM Studio Bionic通过统一界面整合了模型服务、任务规划器等

weixin_29053695的博客 647

西门子1500 PLC与巴鲁夫RFID实战:从硬件接线到数据读写的完整流程

本文详细介绍了西门子S7-1500 PLC与巴鲁夫RFID系统集成的完整实战流程。内容涵盖从硬件选型、接线、PROFINET网络配置,到在TIA Portal中安装GSD文件、组态设备、分配地址,再到使用标准功能块(如FB31)进行程序架构设计、实现数据读写以及错误诊断。文章重点分享了硬件连接要点、软件配置步骤、数据块管理技巧以及调试中常见问题的解决方案,为工业自动化工程师实施RFID项目提供了清晰的指导。

weixin_29161785的博客 385

jQuery遍历的几种方式

jQuery遍历的几种方式1. jq对象.each(callback) 或 选择器.each(callback)1.1. 回调函数不带参数 (*注意:这种不带参数的回调只能获取到集合中的每一个元素对象,而不能获取到相应索引值,且只能通过this来获取对象)1.2. 回调函数带参数(*可以获取到index索引,且有两种获取元素对象的方式,如下)2. jQuery.each(object, [callback])2.1. 回调函数不带参数 (*与1.1效果类似,只能通过this来获取对象)2.2. 回调函数带参

bug_producter的博客 2万+

单细胞分析实战:当Seurat的SCTransform遇上Harmony,我的整合流程优化笔记

本文详细介绍了单细胞转录组数据分析中SCTransform与Harmony整合流程的优化策略。通过实战案例展示如何调整SCTransform参数、优化Harmony整合效果,并解决常见问题,帮助研究者获得更可靠的生物学发现。特别适合需要处理批次效应的单细胞数据分析人员。

weixin_42552716的博客 356

jquery遍历对象,数组,集合

1.jquery遍历对象 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE> <script language="javascript" ty...

牛奶咖啡 802

MFC+Modbus-Tcp协议实现温湿度传感器采集

本文简单介绍MFC使用-Tcp通信实现系列MODBUSTCP型温湿度传感器采集数据。

zhigang_zhao的博客 2830

37.华为路由器:loopback(本地回环)接口的作用

本地环回接口(或地址),亦称回送地址(loopback address)。 此类接口是应用最为广泛的一种虚接口,几乎在每台路由器上都会使用。常见于如下用途: 1 作为一台路由器的管理地址 系统管理员完成网络规划之后,为了方便管理,会为每一台路由器创建一个loopback 接口,并在该接口上单独指定一个IP 地址作为管理地址 ,管理员会使用该地址对路由器远程登录(telnet ),该地址实际上起到了类似设备名称一类的功能。 但是通常每台路由器上存在众多接口和地址,为何不从当中随便挑选一个呢 ? 原因如下:由于

迷逝 3万+

jquery 遍历对象、数组、集合

转:http://blog.sina.com.cn/s/blog_5db0dfe40100hay7.html 使用了jquery有段时间了,整理下jquery中的遍历问题。 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HE...

aoxia213840221的博客 194

【QNX+Android虚拟化方案】00 - 系列文章链接汇总

【QNX+Android虚拟化方案】00 - 系列文章链接汇总

|~~~热爱生活、努力学习的小伙汁~~~| 1万+

[jQuery]each遍历集合

直接each <p>1</p> <p>2</p> <p>3</p> <p>4</p> <script type="text/javascript"> $("p").each(function(){ alert($(this).tex...

weixin_42148490的博客 683

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

jQuery遍历对象/数组/集合

jQuery遍历对象/数组/集合 转载自: 网络 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> ...

174

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

[转]jQuery遍历对象/数组/集合

转载自: 网络 1. jQuery遍历对象 1 <script> 2 $(function()) { 3   var tbody = ""; 4   // -------遍历对象 .each的施用 5   var obj = [{"name": "项少龙", "password": "123456"}]; 6   $("#result").html("-------...

aqc802886的博客 90

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

JQuery遍历方式

文章目录1.js的遍历方式2. jq的遍历方式 1.js的遍历方式 for(初始化值;循环结束条件;步长) 2. jq的遍历方式 jq对象.each(callback)  1. jquery对象.each(function(index,element){});   index:就是元素在集合中的索引   element:就是集合中的每一个元素对象   this:集合中的每一个元素对象  2. ...

你今天真好看呀 347

jquery 遍历对象、数组、集合_项海军_新浪博客

jquery 遍历对象、数组、集合_项海军_新浪博客 jquery遍历对象、数组、集合_项海军_新浪博客 使用了jquery有段时间了,整理下jquery中的遍历问题。1.jquery 遍历对象<!DOCTYPE HTML PUBLIC "-//W3C//...

150

jQuery遍历List对象

jQuery遍历List对象 在jQuery中,可以使用each()方法以一种非常直观的方式来模拟break和continue关键字的功能。只需在回调函数中编写一条return语句即可。要停止迭代,只需从回调函数返回false,这与在普通循环语句中使用break语句类似。要跳过当前迭代并继续进行下一轮迭代,只需返回true即可,这与在循环语句中使用continue类似。 下图为后端封装的集合类型 我们现在只遍历集合types就行,前端js代码如下: $.each(data.ProductType,funct

冲出仁川,走出马德里,故事还会再继续 2684

JQuery查找子元素find()和遍历集合each的方法积累(扩展对jquery对象和DOM对象的理解)

1.HTML代码 <div name="students" school="HK"> <input type="boy" name="ZhangSan" value="206"> <input type="girl" name="Lisi" value="108"> </div> 2.jquery <script type="text/javascript"> /* find() 查找子元素方法

老头学编程的博客 2680

Jquery遍历集合 对象 Json

$(function() { var arr1 = {"d":"one", //JSON "u":"two", "a":"three", "n":"four", "b":"five" }; var arr2 = ["one", "two", "three", "fo...

段小宝的博客 582

jQuery——遍历数据的方式

1.JS实现: <script> var arr= ["1111","2222","3333","4444","5555"] function foreach(array) { for (var i = 0; i < array.length; i++) { var item = array[i]; alert(i+": "item...

WannaRunning的博客 765
上一篇: JQuery的基本选择器使用总结以及过滤,文本,可见度的选择代码
下一篇: JQuery获取子孩子和兄弟元素的方法
宇宙第一帅
博客等级 码龄12年 22粉丝 147原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值