jQuery遍历页面中的标签

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

遍历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 {}
	});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

旭寒ls

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

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

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

打赏作者

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

抵扣说明:

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

余额充值