jquery循环each

最新推荐文章于 2024-09-17 03:26:38 发布

a_Joker_Ling

最新推荐文章于 2024-09-17 03:26:38 发布

阅读量728

点赞数

分类专栏： JavaScript jquery Html 文章标签： html jquery css js vue

本文链接：https://blog.csdn.net/a1209849629/article/details/105530581

版权

Html 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用jQuery的each方法实现手风琴效果。通过遍历jQuery选择的对象集合，对每个元素进行特定操作，从而达到交互目的。

摘要由CSDN通过智能技术生成

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>