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).
bahagian seterusnya
