jQuery中的each关键词
#转载请留言联系
从一个简单的例子引入，jQuery里的each有什么作用？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('#list li').css({'background':"blue"});
console.log($('#list li').html())
}) </script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
打开网页的效果是，列表的每一项背景色都变成蓝色了，但是终端只能输出列表第一项的值1。这是为什么呢？
原因就是，$('#list li').css({'background':"blue"});这句jQuery代码，里面实际上本质上还是js的循环在完成多个元素的背景修改。
而获取元素时内部没有循环，当我们需要获取列表的元素时，就需要使用循环或者用each关键词了！
1.使用循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
for(var i=0;i<$('#list li').length;i++){
console.log($('#list li').eq(i).html())
}
}) </script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html> 终端输出：
1
2
3
4
5
2.使用each关键词
语法：
$(selector).each(function(index,element))
| 参数 | 描述 |
|---|---|
| function(index,element) |
必需。为每个匹配元素规定运行的函数。
|
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('#list li').each(function(i,ele){
console.log($(ele).html())
})
})
</script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等
在开发过程中使用$each可以大大的减轻我们的工作量。
jQuery中的each关键词的更多相关文章
- JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jQuery实现高亮显示网页关键词的方法
本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你 ...
- jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()
本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- JQuery中ajax的相关方法总结
前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
随机推荐
- div嵌套img高度不相同
div中嵌套img,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px. 可以明显看到div实际高度高出img高度3px.为了解决此问题,我 ...
- C#中窗体、MDI的使用心得
1、Show()和ShowDialog()的差别，前者在执行之后，无需等待返回，多用于MDI窗体的显示（MDI窗体之间是并列的，可以随时切换，需要注意自己调整的页面的需求，是要并列，还是要等待其中一个 ...
- Python 3基础教程10-全局变量和局部变量
本文来讲讲全局变量和局部变量,前面学习了函数的基本使用,所以,这里就要注意变量的使用和访问权限. 试试下面的demo.py
- JavaWeb项目中使用ajax上传文件
1.jsp $("#cxsc").click(function(){ var bankId = $("#bankId").val(); var formdata ...
- linux误删除恢复
extundelete 大家基本都知道,在linux上误删除了东西后果是很严重的,尤其是在服务器上误删除了东西,对于字符终端,想要实现恢复删除的数据更是难上加难,对于Linux误删除了重要的东西,虽然 ...
- UVa 1445 - Cubist Artwork
统计正面看高度为i的竖条个数为cnt1[i], 统计侧面看高度为i的竖条个数为cnt2[i]: ans = sum( i * max( cnt1[i], cnt2[i] ) ); ( 1 <= ...
- 团队冲刺Alpha（九）
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- stack，heap的区别
一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其 操作方式类似于数据结构中的栈. ...
- P2507 [SCOI2008]配对
题目背景 四川NOI2008省选 题目描述 你有 n 个整数Ai和n 个整数Bi.你需要把它们配对,即每个Ai恰好对应一个Bp[i].要求所有配对的整数差的绝对值之和尽量小,但不允许两个相同的数配对. ...
- Hadoop中maptask数量的决定因素
刚开始接触hadoop平台的时候 部分初学者对于mapreduce中的maptask的数量是怎么确定的 可能有点迷惑,如果看了jobclient里面的maptask初始化的那段源码,那么就比较清楚了, ...