首页 前端知识 jQuery遍历页面中的标签

jQuery遍历页面中的标签

2024-06-19 23:06:36 前端知识 前端哥 9 206 我要收藏

遍历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 {}
	});
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12859.html
标签
评论
发布的文章

jQuery实现简单抽奖大转盘

2024-07-01 23:07:44

jQuery思维导图

2024-07-01 23:07:43

在jQuery中添加表格行

2024-07-01 23:07:36

jquery数据类型转换

2024-07-01 23:07:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!