jQuery traversée chacun()
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方法回調(diào)判斷</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍歷所有的li
//修改每個li內(nèi)的字體顏色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍歷所有的li
//修改偶數(shù)li內(nèi)的字體顏色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
</html>
