简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

jQuery traversal next() kaedah

jQuery ialah objek koleksi Jika anda ingin mencari set elemen elemen adik beradik dengan cepat mengikuti setiap elemen dalam set elemen yang ditentukan, anda boleh menggunakan kaedah seterusnya()

untuk memahami nod. perhubungan carian:

Elemen class="item-1" berikut ialah bahagian merah, dan class="item-2" biru ialah elemen adik beradiknya

<ul class=" tahap-3"> ;

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

next() tidak mempunyai parameter

membolehkan kami mencari melalui elemen Adik beradik terdekat unsur-unsur ini serta-merta diikuti dalam koleksi, dan objek jQuery baharu dicipta berdasarkan elemen padanan.

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

kaedah next() secara selektif menerima jenis ungkapan pemilih yang sama Formula

juga kerana jQuery ialah objek koleksi Mungkin perlu menapis objek koleksi ini untuk mencari elemen sasaran, jadi ia dibenarkan untuk melepasi ungkapan pemilih

Mari tulis. contoh kod di bawah. Kodnya adalah seperti berikut: 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 120px;
    }
    
    .left div {
        width: 150px;
        height: 70px;
        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>next方法()</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>点击：next无参数</button>
    <button>点击：next传递表达式</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('.item-1').next().css('border', '1px solid red');
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-3的li
        //然后筛选出第一个li，加上蓝色的边
       $('.item-2').next(':first').css('border', '1px solid 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: 120px; } .left div { width: 150px; height: 70px; 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>next方法()</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>点击：next无参数</button> <button>点击：next传递表达式</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-1').next().css('border', '1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-3的li //然后筛选出第一个li，加上蓝色的边 $('.item-2').next(':first').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)  492128 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！