jquery循环each
·
jquery循环
对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：
$(function(){
$('.list li').each(function(i){
$(this).html(i);
})
})
......
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $li = $('.list li');
//$li.css({'backgroundColor':'gold'});
$li.each(function(a){
//alert(a);
//alert( $(this).html() );
//alert($(this).index());
if($(this).index()%2==0)
{
$(this).css({'backgroundColor':'gold'});
}
})
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
手风琴效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript">
$(function(){
var $li = $('#accordion li');
$li.click(function(){
//alert($(this).html());
$(this).animate({'left':21*$(this).index()});
//点击的li前面的li向左运动到各自的位置
$(this).prevAll().each(function(){
//这里的$(this)指的是循环选择的每个li
$(this).animate({'left':21*$(this).index()});
})
// 第5个li在右边的left值 727-21*1 等同于 727-21*(5-$(this).index())
// 第4个li在右边的left值 727-21*2 等同于 727-21*(5-$(this).index())
// 第3个li在右边的left值 727-21*3 等同于 727-21*(5-$(this).index())
$(this).nextAll().each(function(){
$(this).animate({'left':727-21*(5-$(this).index())});
})
})
})
</script>
<title>手风琴效果</title>
</head>
<body>
<div id="accordion">
<ul>
<li class="bar01"><span>景色01</span><img src="images/001.jpg" /></li>
<li class="bar02"><span>景色02</span><img src="images/002.jpg" /></li>
<li class="bar03"><span>景色03</span><img src="images/003.jpg" /></li>
<li class="bar04"><span>景色04</span><img src="images/004.jpg" /></li>
<li class="bar05"><span>景色05</span><img src="images/005.jpg" /></li>
</ul>
</div>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)