1种 通过each遍历li 可以获得所有li的内容
<!-- 1种 -->
<ul class="one">
<li>11a</li>
<li>22b</li>
<li>33c</li>
<li>44d</li>
<li>55e</li>
</ul>
<button>输出每个li值</button>
<script>
// 1种 通过each遍历li 可以获得所有li的内容
$("button").click(function(){
$(".one > li").each(function(){
// 打印出所有li的内容
console.log($(this).text());
})
});
</script>
2种 通过each遍历li 通过$(this)给每个li加事件
<!-- 2种 -->
<ul class="two">
<li>2222</li>
<li>22b</li>
<li>3333</li>
<li>44d</li>
<li>5555</li>
</ul>
<script>
// 2种 通过each遍历li 通过$(this)给每个li加事件
$('.two > li').each(function(index) {
console.log(index +":" + $(this).text()); // 给每个li加click 点那个就变颜色
$(this).click(function(){
alert($(this).text());
$(this).css("background","#fe4365");
}); });
</script>
4种 遍历所有li 给所有li添加 class类名
<!-- 4种 -->
<ul class="ctn3">
<li>Eat</li>
<li>Sleep</li>
<li>3种</li>
</ul>
<span>点击3</span>
<script>
// 4种 遍历所有li 给所有li添加 class类名
$('span').click(function(){
$('.ctn3 > li').each(function(){
$(this).toggleClass('example');
})
});
</script>
5种 在each()循环里 element == $(this)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each练习2</title> <style>
div {
width: 40px;
height: 40px;
margin: 5px;
float: left;
border: 2px blue solid;
text-align: center;
}
span {
width: 40px;
height: 40px;
color: red;
}
</style>
</head>
<body> <div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<button>Change colors</button>
<span></span> </body>
<script src="jquery-1.11.1.min.js"></script>
<script >
// 在each()循环里 element == $(this)
$('button').click(function(){
$('div').each(function(index,element){
//element == this;
$(element).css("background","yellow"); if( $(this).is("#stop")){
$('span').text("index :" + index);
return false;
}
})
})
</script>
</html>
随机推荐
-
两种设置disabled属性以及三种方法移除disabled属性
//两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...
-
Oracle创建/删除表空间和用户(2014-3-10 记)
/*创建表空间名为:DB_NAME*/ create tablespace DB_NAME datafile 'E:\oracle_data\db_name.dbf' size 100M autoex ...
-
【转】轻量级分布式 RPC 框架
第一步:编写服务接口 第二步:编写服务接口的实现类 第三步:配置服务端 第四步:启动服务器并发布服务 第五步:实现服务注册 第六步:实现 RPC 服务器 第七步:配置客户端 第八步:实现服务发现 第九 ...
-
【Xamarin挖墙脚系列：在VMware11中安装Mac10.11 EI Captain后的vmware tools】
原文:[Xamarin挖墙脚系列:在VMware11中安装Mac10.11 EI Captain后的vmware tools] 如何安装 darwin.iso,百度去吧. 关键是对应版本的darwin ...
-
php 事务处理transaction
MySQL 事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据库操作语句就构成 ...
-
oracle更具uuid排序后进行分页
oracle查询分页.一个demo,可以借用. select a.unid from ( select t.unid,rownum rowno from DEV_REG_CFG_CAMERA t wh ...
-
js 压缩上传的图片方法（默认上传的是file文件）
//压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...
-
cat &; 文件结束符
语法: 连接显示 选项: -n,显示行号. -v,显示不可见打印符. -E,显示“行结束符”($). 显示行号 $ cat -n /etc/fstab /dev/VolGroup00/LogVol00 ...
-
CodeForces 154A Hometask dp
题目链接: http://codeforces.com/problemset/problem/154/A 题意: 给你一个字符串,和若干模板串(长度为2),至少删除多少个字母,使得字符串的字串里面没有 ...
-
【sonar-block】Use try-with-resources or close this ";BufferedInputStream"; in a ";finally"; clause.
自己的理解: try-with-resources是JDK7的新语法结构,主要功能是自动关闭资源而不需要在finally里面手动close()关闭, 而且最重要的是,try块中的异常不会被close( ...