jQuery traversal each()
jQuery ialah objek koleksi Selepas mencari koleksi elemen yang ditentukan melalui kaedah $(), satu siri operasi boleh dilakukan. Sebagai contoh, kami mengendalikan $("li").css('') Tetapkan nilai gaya untuk semua li Oleh kerana jQuery ialah objek koleksi, kaedah css mesti merangkum kaedah traversal di dalam, yang dipanggil proses lelaran tersirat. Untuk menetapkan warna bagi setiap li dalam koleksi satu demi satu, kaedah di sini ialah setiap
kaedah setiap() ialah pengulangan untuk gelung, yang akan melelaran setiap elemen DOM dalam koleksi objek jQuery. Setiap kali fungsi panggil balik dilaksanakan, bilangan gelung semasa akan dihantar sebagai parameter (pengiraan bermula dari 0
Jadi secara amnya fahami 3 perkara utama:
setiap satu ialah lelaran pembalut untuk untuk gelung
setiap satu diproses melalui panggilan balik dan akan mempunyai dua parameter sebenar tetap, indeks dan elemen
ini dalam setiap kaedah panggil balik menghala ke elemen dom lelaran semasa
Lihat kes mudah
<ul>
<li>php.cn</li>
<li>Aaron</li>
</ul>
Mulakan lelaran li dan gelung 2 kali
$("li").setiap(fungsi(indeks, elemen) {
indeks indeks 0,1
elemen ialah elemen yang sepadan li node li ,li
Ini menunjuk kepada li
})
Dengan cara ini anda boleh melakukan beberapa operasi logik dalam badan gelung Jika anda perlu keluar awal, anda boleh mengembalikan palsu dalam fungsi panggil balik. Hentikan gelung
Mari tulis sekeping kod:
<!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>
