jQuery中的each()方法
2022-03-18 本文已影响0人
马佳乐
- jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
- each()作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
语法格式：
$(元素) .each(function(index ,element){});
参数1表示当前元素在所有匹配元素中的索引号
参数2表示当前元素(DOM对象)
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
width: 1000px;
}
li {
float: left;
width: 200px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
margin: 0 20px 20px 0;
}
</style>
</head>
<body>
<ul id="ulList">
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
</ul>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function() {
// for(var i = 0; i < $("li").length; i++) {
// $("li").eq(i).css("opacity", (i+1)/10);
// }
//each方法
$("li").each(function(index, element) {
$(element).css("opacity", (index + 1) / 10);
});
});
</script>
