jQuery遍历之each()
来源:互联网 发布:mac 无法下载flash 编辑:程序博客网 时间:2024/06/07 15:38
jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值,因为jQuery是一个合集对象,所以css方法内部就必须封装一个遍历的方法,被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色,这里方法就是each
.each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数
所以大体上了解3个重点:
each是一个for循环的包装迭代器each通过回调的方式处理,并且会有2个固定的实参,索引与元素each回调方法中的this指向当前迭代的dom元素
看一个简单的案例
<ul> <li>慕课网</li> <li>Aaron</li></ul>
开始迭代li,循环2次
$("li").each(function(index, element) { index 索引 0,1 element是对应的li节点 li,li this 指向的是li})
这样可以在循环体会做一些逻辑操作了,如果需要提前退出,可以以通过返回 false以便在回调函数内中止循
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>点击:each方法遍历元素</button>
<button>点击:each方法回调判断</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
</html>
- jQuery遍历之each()
- JQuery遍历-$.each()||$().each()
- Jquery 遍历数组之$().each方法与$.each()方法介绍
- Jquery 遍历数组之$().each方法与$.each()方法介绍
- 遍历 jquery $().each 和 $.each()
- 遍历 jquery $().each和$.each()
- jQuery 遍历 - each() 方法
- jQuery 遍历 - each() 方法
- JQuery each 遍历
- jQuery 遍历 - each() 方法
- jquery的each遍历
- jQuery 遍历 - each() 方法
- jQuery 遍历 - each() 方法
- jQuery遍历函数 each
- jQuery 遍历 - each() 方法
- JQuery遍历 each方法
- jQuery .each()遍历用法
- jQuery-each遍历
- docker技术浅谈
- Java:关于方法的返回值的用法及代码说明
- [编程之美-16]层序打印二元树,每层打印一行
- 安装PHPMyAdmin
- linux下lsof使用
- jQuery遍历之each()
- 拷贝文件以及文件异常处理
- sqlserver分组将多行合并成一行
- Kotlin编程之二
- 主机无法访问虚拟机部署的应用
- ccf认证权限查询40分
- 快速排序
- 模拟实现atoi、itoa
- java复习笔记一