rakan jQuery

Adik beradik mempunyai unsur ibu bapa yang sama.

Dengan jQuery, anda boleh lelaran melalui adik-beradik elemen dalam pepohon DOM.

Traversal mendatar dalam pokok DOM

Terdapat banyak kaedah berguna yang membolehkan kita melintasi pokok DOM secara mendatar :

adik beradik()
next()
nextAll()
nextUntil()
prev()
prevAll()
sebelumnya()

kaedah jQuery siblings()

kaedah siblings() mengembalikan dipilih Semua adik-beradik unsur.

Contoh berikut mengembalikan semua elemen adik beradik <h2>:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .siblings *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("h2").siblings().css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<body class="siblings">
<div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>
</body>
</html>

Jalankan atur cara untuk mencubanya

Anda juga boleh menggunakan parameter pilihan untuk menapis pasangan adik-beradik Elemen carian.

Contoh berikut mengembalikan semua <p> elemen yang merupakan adik beradik kepada <h2>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

Jalankan program untuk mencubanya

kaedah jQuery next()

kaedah next() mengembalikan elemen adik beradik seterusnya bagi elemen yang dipilih.

Kaedah ini hanya mengembalikan satu elemen.

Contoh berikut mengembalikan elemen adik beradik seterusnya <h2>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

Jalankan program dan cuba

jQuery nextAll () Kaedah

nextAll() kaedah mengembalikan semua elemen adik-beradik berikut bagi elemen yang dipilih.

Contoh berikut mengembalikan semua elemen adik beradik berikut bagi <h2>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

Jalankan program untuk mencubanya

jQuery kaedah nextUntil( )

nextUntil() kaedah mengembalikan semua elemen adik beradik berikut antara dua parameter yang diberikan.

Contoh berikut mengembalikan semua elemen adik beradik antara kaedah <h2> 🎜>Query prev(), prevAll() & prevUntil() method

prev(), prevAll() dan kaedah prevUntil() berfungsi sama dengan kaedah di atas, kecuali Ia hanya arah yang bertentangan: mereka mengembalikan elemen adik-beradik sebelumnya (melintasi ke belakang di sepanjang elemen adik-beradik dalam pokok DOM, bukan ke hadapan).

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

rakan jQuery

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]