jQuery est un objet de collection.Après avoir trouvé la collection d'éléments spécifiée via la méthode $(), une série d'opérations peut être effectuée. Par exemple, nous opérons $("li").css('')
Définissez des valeurs de style pour tous les li. Étant donné que jQuery est un objet de collection, la méthode CSS doit encapsuler une méthode de traversée à l'intérieur, appelée processus d'itération implicite. Pour définir la couleur de chaque li de la collection un par un, la méthode ici est each
.each() est un itérateur de boucle for, qui itérera chaque élément DOM de la collection d'objets jQuery. Chaque fois que la fonction de rappel est exécutée, le nombre actuel de boucles sera passé en paramètre (le comptage commence à partir de 0
Comprenez donc généralement 3 points clés :
chacun est un itérateur wrapper pour un for loop
chacun est traité via des rappels et aura deux paramètres réels fixes, index et élément
ceci dans chaque méthode de rappel pointe vers l'élément dom de l'itération actuelle
Regardez un cas simple
<ul>
<li>php.cn</li>
<li>Aaron</li>
</ul>
Commencez à itérer li et bouclez 2 fois
$("li").each(function(index, element) {
index index 0,1
l'élément est l'élément correspondant li node li ,li
Cela pointe vers li
})
De cette façon, vous pouvez effectuer certaines opérations logiques dans le corps de la boucle. Si vous devez quitter plus tôt, vous pouvez renvoyer false. dans la fonction de rappel. Abandonnez la boucle
Écrivons un morceau de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>点击：each方法遍历元素</button>
<button>点击：each方法回调判断</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
</html>
section suivante