masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

kaedah traversal jQuery prev().

jQuery ialah objek koleksi Jika anda ingin mencari set elemen elemen adik beradik sebelumnya bagi setiap elemen dalam set elemen yang ditentukan, anda boleh menggunakan kaedah prev()

untuk memahami nod. perhubungan carian:

Berikut ialah elemen li biru class="item-2", nod merah ialah nod saudara sebelumnya

<ul class="level-3"> ;

  <li class="item-1">1</li>
  <li class="item-2">2</li>
  <li class="item- 3">3</li>
</ul>

prev() tiada parameter

Dapatkan set yang mengandungi elemen padanan serta-merta bersebelahan kepada setiap elemen Set elemen elemen adik beradik sebelumnya

Nota: jQuery ialah objek koleksi, jadi sebelumnya ialah elemen adik beradik sebelumnya yang sepadan dengan setiap elemen dalam koleksi

sebelumnya () pemilihan kaedah Terima jenis ungkapan pemilih yang sama

Begitu juga, kerana jQuery ialah objek koleksi, mungkin perlu menapis objek koleksi ini untuk mencari elemen sasaran, jadi ia dibenarkan untuk melepasi ungkapan pemilih < Menambah pemilih dalam 🎜>

<!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: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    a {
        display: block;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>prev方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：prev无参数</button>
    <button>点击：prev传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
         $('.item-2').prev().css('border', '1px solid red');
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出最后一个，加上蓝色的边
       $('.item-3').prev(':last').css('border', '1px solid blue');
    })
    </script>

</body>

</html>

prev() adalah untuk menapis lagi koleksi elemen terdahulu segera, seperti: eq(1), first, last, :contains("3") , has( 'p'), tambah pemilih yang memenuhi keperluan anda untuk menapis Ini adalah sama seperti next(), tetapi fungsinya berbeza

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: 100px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } a { display: block; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>prev方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>点击：prev无参数</button> <button>点击：prev传递选择器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').prev().css('border', '1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-2的li //然后筛选出最后一个，加上蓝色的边 $('.item-3').prev(':last').css('border', '1px solid 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)  492834 permainan