jQuery循环

最新推荐文章于 2021-02-23 15:03:28 发布

夏至青柠

最新推荐文章于 2021-02-23 15:03:28 发布

阅读量355

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qibulemingzi/article/details/107540523

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery循环

在这里插入图片描述
each(callback)循环

callback
对于每个匹配的元素所要执行的函数

示例
描述:
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

描述:
如果你想得到 jQuery对象，可以使用 $(this) 函数。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

描述:
你可以使用 ‘return’ 来提前跳出 each() 循环。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

jQuery 代码:

$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

练习一刻
描述：
获取标签内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('ul>li a').each(function(){
					console.log($(this).text())
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li><a href="#">111</a></li>
			<li><a href="#">222</a></li>
			<li><a href="#">333</a></li>
			<li><a href="#">444</a></li>
			<li><a href="#">555</a></li>
		</ul>
	</body>
</html>

jQuery 遍历方法

jquery遍历方法地址
在这里插入图片描述