masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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方法回调判断</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>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; 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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492413 permainan