jquery遍历方法怎么使用-前端-云技术

文章页正文上

这篇文章主要介绍“jquery遍历方法怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jquery遍历方法怎么使用”文章能帮助大家解决问题。遍历方法有：1、add()，用于把元素添加到匹配元素的集合中；2、children()，用于返回被选元素的所有直接子元素；3、closest()，用于返回被选元素的第一个祖先元素；4、contents()，用于返回被选元素的所有直接子元素；5、each()，用于为每个匹配元素执行函数；7、eq()；8、find()；9、first()；10、is()；11、last()等等。jQuery 遍历方法总结jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。两个遍历子元素的方法children()方法：获取该元素下的直接子集元素find()方法：获取该元素下的所有（包括子集的子集）子集元素区别：children() 方法返回返回被选元素的所有直接子元素（直接子元素，只找儿子不要孙子（：也就是说不会递归去遍历）
find()方法获得当前元素集合中每个元素的后代（注意find（）方法，必须传参数，否者无效）示例：查询所有子元素


html>

	
		div(父节点)
			ul(指定元素)
				li(子节点1)
					span(孙节点1)
				
				li(子节点2)
					span(孙节点2)
				
				li(子节点3)
					span(孙节点3)

7种遍历同级元素的方法：siblings()方法，主要用于获得指定元素的同级所有元素next()方法，主要用于获得指定元素的下一个同级元素nextAll()方法，主要用于获得指定元素的下一个同级的所有元素nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素prev()方法，主要用于获得指定元素的上一级同级元素prevAll()方法，主要用于获得指定元素上一级所有的同级元素prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素siblings()方法


html>

	
		Hello
		HelloAgain
		AndAgain

HelloAgainAndAgainnext()方法


html>

	
		

listitem1
listitem2
listitem3
listitem4
listitem5

nextAll()方法


html>

	
		

listitem1
listitem2
listitem3
listitem4
listitem5

nextUntil()方法


html>

	
		
			ul(父节点)
				li(兄弟节点)
				li(兄弟节点)
				li(类名为"start"的兄弟节点)
				li(类名为"start"的li节点的下一个兄弟节点)
				li(类名为"start"的li节点的下一个兄弟节点)
				li(类名为"start"的li节点的下一个兄弟节点)
				li(类名为"stop"的兄弟节点)
			

		在这个例子中,我们返回在类名为“star”和类名为“stop”的li元素之间的所有下一个兄弟元素。

在这个例子中,我们返回在类名为“star”和类名为“stop”的li元素之间的所有下一个兄弟元素。prev()方法


html>

	
		
			ul(父节点)
				li(兄弟节点)
				li(类名为"start"的li节点的上一个兄弟节点)
				li(类名为"start"的li节点)
				li(兄弟节点)
				li(兄弟节点)

prevAll()方法


html>

	
		
			ul(parent)
				li(类名为"start"的li的上一个兄弟节点)
				li(类名为"start"的li的上一个兄弟节点)
				li(类名为"start"的li的上一个兄弟节点)
				li(类名为"start"的li节点)
				li(兄弟节点)
				li(兄弟节点)
			

		在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。

在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。prevUntil()方法


html>

	
		
			ul(父节点)
				li(类名为"stop"的兄弟节点)
				li(类名为"start"的li节点的上一个兄弟节点)
				li(类名为"start"的li节点的上一个兄弟节点)
				li(类名为"start"的li节点的上一个兄弟节点)
				li(类名为"start"的li节点)
				li(兄弟节点)
				li(兄弟节点)
			

		在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。

在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。each()和map()方法可以遍历数组each()遍历数组

map()遍历数组

扩展知识：each的用法 1.数组中的each


复制代码

vararr=["one","two","three","four"];
$.each(arr,function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four

vararr1=[[1,4,3],[4,6,6],[7,20,9]]
$.each(arr1,function(i,item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：147


varobj={one:1,two:2,three:3,four:4};
$.each(obj,function(i){
alert(obj[i]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1234

2.遍历Dom元素中






Coffee
Milk
Soda

依次弹出Coffee，Milk，Soda 3.each和map的比较下面的例子是获取每一个多框的ID值；each方法：定义一个空数组，通过each方法，往数组添加ID值；最后将数组转换成字符串后，alert这个值；


$(function(){
vararr=[];
$(":checkbox").each(function(index){
arr.push(this.id);
});
varstr=arr.join(",");
alert(str);
})

map方法:将每个:checkbox执行return this.id；并将这些返回值，自动的保存为jQuery对象，然后用get方法将其转换成原生Javascript数组，再使用join方法转换成字符串，最后alert这个值；


$(function(){
varstr=$(":checkbox").map(function(){
returnthis.id;
}).get().join();
alert(str);
})

当有需一个数组的值的时候，用map方法，很方便。 4.jquery中使用each例遍数组，同时使用元素索引和内容。（i是索引，n是内容）代码如下:


$.each([0,1,2],function(i,n){
alert("Item#"+i+":"+n);
});

例遍对象，同时使用成员名称和变量内容。（i是成员名称，n是变量内容）代码如下:


$.each({name:"John",lang:"JS"},function(i,n){
alert("Name:"+i+",Value:"+n);
});

例遍dom元素，此处以一个input表单元素作为例子。如果你dom中有一段这样的代码

然后你使用each如下
代码如下:


$.each($("input:hidden"),function(i,val){
alert(val);//输出[objectHTMLInputElement]，因为它是一个表单元素。
alert(i);//输出索引为0，1，2，3
alert(val.name);//输出name的值
alert(val.value);//输出value的值
});

5.each中根据this查找元素实现效果”回复”两个字只有在鼠标经过的时候才显示出来





嗨，第一层评论

回复





第二层评论

回复

嗨，第一层评论第二层评论js代码如下


$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();
},function(){
$(this).find(".comment-reply-link").hide();
});

实现效果，验证判断题是否都有选择html





1.阿斯顿按时请选择


A.阿萨德发




B.阿萨德发




C.阿斯顿

js代码


//验证单选题是否选中
$("ul#ulSingle>li.liStyle").each(function(index){
//选项个数
varcount=$(this).find("ul>li>:checkbox").length;
varselectedCount=0
for(vari=0;ili>:checkbox:eq("+i+")").attr("checked")){
selectedCount++;
break;
}
}
if(selectedCount==0){
$(this).find("label#selectTips").show();
returnfalse;
}
else{
$(this).find("label#selectTips").hide();
}
})

ps:传说中attr(“property”, “value”);在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find(“ul>li>:checkbox:eq(” + i + “)”).is(“:checked”);6.官方解释
以下是官方的解释：


jQuery.each(object,[callback])

概述通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。参数objectObject ：需要例遍的对象或数组。callback (可选)Function ：每个成员/元素执行的回调函数。
关于“jquery遍历方法怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: 如何使用Node进行图片压缩

这篇文章主要介绍“如何使用Node进行图片压缩”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用Node进行图片压缩”文章能帮助大家解决问题。我们先把图片上传到后端，看看后端接收了什么样的参数。这里后端我用的是N…

文章页内容下

jquery遍历方法怎么使用

相关推荐

推荐AD:

云服务器免费，网站空间免费，等你哦

置顶推荐

热门专题

热门标签

活跃读者

网站统计

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等，SSL部署；安全高速企业专供99.999%稳定，另有高防主机、不限制内容等类型，具体可咨询QQ:360163164,Tel同微信：18905205712

切换注册登录

切换登录注册