永利皇宫官网网址 > js教程 > 正文

jQuery中的each()方法有什么作用

原创 2018-12-13 09:11:21 0 999
赞助会员专享特权
jQuery中each()方法的主要作用是循环遍历不同的数据,我们可以通过它来循环来自相同选择器中的多个DOM对象

今天将和大家介绍的是我们jQuery中的each()函数的用法,它可以允许我们循环遍历不同的数据,比如数组或者对象。jQuery中each()函数是jQuery中最常用的函数之一,接下来在文章中将为大家详细介绍这一方法的使用。

【推荐课程:jQuery教程

jQuery中的each()函数用于循环数据,类似于for each循环。所以我们可以使用它来循环来自相同选择器的多个DOM对象

each() 方法

为每个匹配元素规定要运行的函数。

$(selector).each(function(index,element))

function(index,element) :为每个匹配元素规定所运行的函数。

index : 选择器的 index 位置,获取索引值

element :当前的元素(也可使用 "this" 选择器)

当在each函数内部时,我们可以通过使用this关键字来访问当前元素,但是这个对象不是jQuery对象

$("a").each(function(){
$(this);
})

获取循环的当前索引

<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	$(function(){
		$("li").each(function(i){
			console.log(i);
		})
	})
</script>
	</body>

结果如下图:

循环数组:

可以使用它来遍历数组并获取索引值和在数组中的位置的值。

<script src="jquery/jquery-1.12.4.js"></script>
<script>
var array=['Chinese','Math','English']
	
$.each(array,function(index,value){
console.log(index+":"+value);
})
</script>

结果如下图:

循环对象:

可以使用它来遍历对象并获取索引值和在对象中的位置的值。

<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var obj={
	name:"张三",
	age:"18",
	subject:"English"
};
$.each(obj,function(index,value){
console.log("信息:"+index+":"+value);
		})

</script>

结果如下图:

未标题-2.jpg

总结:以上就是本篇文章的全部内容了,希望通过这篇文章能让大家对jQuery中的each()方法有一定的了解。

以上就是jQuery中的each()方法有什么作用的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:each()
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • jquery中$each()方法的使用指南_jquery
  • jQuery中each()方法用法实例_jquery
  • jQuery each()方法的使用方法_jquery
  • jQuery中的each()方法有什么作用
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5永利娱乐pt88.vip

    独孤九贱(5)_ThinkPHP5永利娱乐pt88.vip

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5永利娱乐pt88.vip》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP永利娱乐pt88.vip

    独孤九贱(4)_PHP永利娱乐pt88.vip

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 永利集团网址导航出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5永利娱乐pt88.vip

    独孤九贱(1)_HTML5永利娱乐pt88.vip

    《php.cn原创html5永利娱乐pt88.vip》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php永利娱乐pt88.vip!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门永利娱乐pt88.vip之一周学会PHP

    PHP入门永利娱乐pt88.vip之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门永利娱乐pt88.vip之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关永利娱乐pt88.vip

  • JQuery 基础入门教程 JQuery 基础入门教程
  • 弹指间学会jQuery 弹指间学会jQuery
  • jQuery基础教程 jQuery基础教程
  • 相关视频章节