jQuery遍历页面中的标签

遍历HTML元素
本文介绍如何使用jQuery遍历HTML页面中的各种元素,如下拉框、按钮、div等,并展示了如何针对这些元素进行操作,例如生成图表和树状控件。

遍历html页面中所需要的元素是一个很常见的操作;

$(a).each(function(){b})
//就是这种形式来遍历元素的,a=需要遍历的元素对象,div,button等等;b是你遍历时想做的操作

如果只想遍历某个div里的指定元素可以使用.find()

$('#div1').find(a).each(function(){b})

下面有几个例子可以看一下

遍历下拉框,给条件符合的下拉框绑定点击事件,相当于监视下拉框选项变化了

$('select').each(function() {
		var aId = $(this).attr('id');//获取自身id
		var parid=$(this).parents().attr('id')//获取父元素id,这个操作在多页面可能重复id的时候很有必要
		var sel = ''//接收达到条件的元素id
		var selda = ''//接收内容
			var ada = this.value//当前下拉框的内容
			$(this).find('option').each(function(){//这里遍历它下面的东西
				var seldata=this.innerHTML
				var ad=seldata.substr(-3)//保留后三位
				if(ad=='条/页'){//判断条件
					sel=aId
					selda=ada
				}
			})
			if(sel!=''){//先判断有没有符合要求的
				$('#'+parid).find('#'+sel).click(function(){//使用父元素向下寻找它比较保险
					console.log(sel)
					console.log(this.value)
					if(selda!=this.value){//点击时判断内容是否变化,如果有变化再进行下一步操作
						console.log("不对,我要请求新数据"+parid.slice(3))
						selda=this.value
					}
				})
			}
	});

遍历页面中的按钮

$('button').each(function() {
		var aId = $(this).attr('id');
		bangding($(this),aId)//这里是传入了别的函数进行下一步操作
	});

遍历div,用于生成图表

$('div').each(function() {
		var aId = $(this).attr('id');
		var aDa = $(this).attr('data');
		if (typeof(aDa) == 'string') {
			if (aDa.length > 20) {
				if (aDa[aDa.length - 1] != "}") {
					aDa += "}"
					var chart = JSON.parse(aDa)
					create_charts(chart, aId)//create_charts为生成图表的函数
				} else if (aDa[aDa.length - 1] == "}") {
					var chart = JSON.parse(aDa)
					create_charts(chart, aId)
				}
			} else {}
		} else {}
	});

遍历ul,生成树状控件

$('ul').each(function() {
		var aId = $(this).attr('id');
		var aDa = $(this).attr('data');
		if (typeof(aDa) == 'string') {
			if (aDa.length > 20) {
				// $(this).html(aId+" => chart");
				// console.log(aId)
				// console.log(aDa)
				if (aDa[aDa.length - 1] != "}") {
					aDa += "}"
					var chart = JSON.parse(aDa)
					create_charts(chart, aId)//create_charts函数里包含了生成树状控件
					// console.log(chart)
				} else if (aDa[aDa.length - 1] == "}") {
					var chart = JSON.parse(aDa)
					create_charts(chart, aId)
					// console.log(chart)
				}
			} else {}
		} else {}
	});
jQuery 中,遍历 DOM 元素是操作页面结构的重要手段之一。jQuery 提供了多种方法来实现对 DOM 树的上下左右遍历,以满足不同场景下的需求。 ### 遍历子元素 `children()` 方法用于获取被选元素的所有直接子元素,并且仅限于向下一级进行遍历[^2]。这对于只关注直接子节点而不涉及更深层次的节点非常有用。 ```javascript $(document).ready(function(){ $("div").children(); }); ``` ### 遍历父元素 `parents()` 方法可以找到指定元素的所有祖先元素。例如,要找到 `<li>` 元素的所有祖先元素并显示它们的标签名称: ```javascript $(function(){ $("button").click(function(){ var tag = $("li").parents().map(function(){ return this.tagName; }).get().join(','); alert(tag); }); }); ``` 此代码会触发一个警报框,展示所有 `<li>` 元素的祖先元素的标签名[^3]。 ### 遍历同级元素 除了上述方法外,jQuery 还提供了 `next()`, `prev()`, `siblings()` 等方法来处理同级元素的遍历。这些方法允许开发者轻松地访问当前元素前后或所有的同级兄弟节点。 ### 使用 each() 方法遍历集合 `each()` 是 jQuery 中非常强大的一个工具方法,它能够遍历任何对象,包括 DOM 元素集合、数组和对象等,并为每个匹配的元素执行一次给定的函数。 ```javascript // 遍历 DOM 元素 $('li').each(function(index, element) { console.log(index + ': ' + $(element).text()); }); // 遍历数组 $.each([1, 2, 3], function(index, value) { console.log(index + ': ' + value); }); // 遍历对象 $.each({name: 'John', age: 30}, function(key, value) { console.log(key + ': ' + value); }); ``` ### 查找后代元素 `find()` 方法用于从当前匹配的元素集中搜索所有匹配选择器的后代元素。这个方法非常适合需要深入查找特定层级下元素的情况。 以上方法结合使用,可以让开发者灵活地控制和操作网页上的 DOM 结构,从而实现更加动态和交互性强的 Web 应用程序。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旭寒ls

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值