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>

随机推荐

  1. 【C语言入门教程】7.4 共用体

    7.4 共用体 共用体又称为联合体,是由不同的数据类型组成的一个整体.与结构体不同的是,共用体每次只能使用其中一个成员.结构体的总长度是结构体所有成员长度之和,共用体的总长度是其中最长一个数据类型的长 ...

  2. MFC中CString转化为char*

    char* convertCStringToChars(CString string) { int nLength=string.GetLength(); ]; memset(c,,nLength+) ...

  3. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  4. nginx反向代理、优化

    本优化适合apache,nginx,squid多种等web应用,特殊的业务也可能需要略作调.生产环境linux的内核优化 net.ipv4.tcp_fin_timeout = net.ipv4.tcp ...

  5. windows7 + cocos2d-x 3.2 +vs2012 速度真的很慢

    每次编译要大半天,简直伤不起,这样效率如何上的去???有谁有办法?

  6. spring边边角角

    我们在使用ssh框架的时候,很多人抱怨为什么之前都运行得好好的,第二天就报错了,我也是被这个问题纠结了很久. 我们来看看spring的配置文件: <?xml version="1.0& ...

  7. ubuntu 14 谷歌拼音输入法

    帮人倒腾了下,顺便记录下: https://rivercitylabs.org/install-google-pinyin-on-ubuntu-14-04/ sudo apt-get install ...

  8. MySql 导出excel

    select * into outfile './bestlovesky.xls' from bestlovesky where 1 order by id desc  limit 0, 50;

  9. JAVA 回调机制(callback)

    序言 最近学习java,接触到了回调机制(CallBack).初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义.当然了,我在理解了回 ...

  10. devstack查看服务日志

    执行如下指令: $ screen -x stack 同时按ctrl和a键,然后同时按shift和'键(即"),就可以浏览到服务列表: 上下翻到要查看的服务,进入即可看到当前的运行日志.重启就 ...