rakan jQuery
jQuery Traversal - Adik beradik
Adik beradik mempunyai unsur induk yang sama.
Dengan jQuery, anda boleh lelaran melalui adik-beradik elemen dalam pepohon DOM. Terdapat banyak kaedah Berguna membolehkan kita melintasi pokok DOM secara mendatar:
adik-beradik()next()
nextAll()
nextUntil() sebelum()
sebelumSemua()
sebelumSehingga()
kaedah jQuery siblings()kaedah siblings() mengembalikan semua elemen saudara bagi elemen yang dipilih.
Contoh berikut mengembalikan semua adik-beradik <h2>:
Instance<!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>Instance berjalan» Klik butang "Jalankan Instance" untuk melihat contoh dalam talianAnda juga boleh menggunakan parameter pilihan untuk menapis carian unsur adik beradik. Contoh berikut mengembalikan semua <p> elemen yang merupakan 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("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 Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
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>:
Instance<!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>
Run Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
nextAll() mengembalikan semua elemen adik-beradik berikut bagi elemen yang dipilih.
Instance
<!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 Instance» Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
kaedah jQuery nextUntil()
nextUntil() kaedah mengembalikan pengenalan Semua elemen adik-beradik berikut antara dua hujah yang diberikan.
Contoh berikut mengembalikan semua elemen adik beradik antara elemen <h2> dan <h6> 🎜>Jalankan Instance»
kaedah jQuery prev(), prevAll() & prevUntil()
prev(), prevAll() dan prevUntil() kaedah Berfungsi sama seperti kaedah di atas, tetapi dalam arah yang bertentangan: mereka mengembalikan elemen adik-beradik sebelumnya (melintasi elemen adik-beradik ke belakang dalam pokok DOM, bukannya ke hadapan).
