jQuery lintasan mendatar

Lintasan mendatar dalam pokok DOM

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

adik-beradik()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

kaedah adik beradik()

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

Parameter pilihan boleh digunakan untuk menapis carian unsur adik beradik.

<!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 blue","width":"200px"});
});
</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>

Mengembalikan semua elemen <p>

kaedah next()

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

Kaedah ini hanya mengembalikan satu elemen.

<!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":"5px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

Mengembalikan elemen adik beradik seterusnya bagi <h2>.

kaedah nextAll()

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

<!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":"3px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
</body>
</html>

Mengembalikan semua elemen adik beradik berikut bagi <h2>.

Kaedah

nextUntil() kaedah

nextUntil() mengembalikan semua elemen adik beradik berikut antara dua hujah yang diberikan. Semua adik beradik antara elemen

<!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").nextUntil("h6").css({"color":"red","border":"4px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>
</body>
</html>

<h2> Kaedah

kaedah jQuery prev(), prevAll() & prevUntil()

prev(), prevAll() dan prevUntil() berfungsi dengan cara yang sama Kaedah di atas adalah serupa, tetapi dalam arah yang bertentangan: mereka mengembalikan elemen adik-beradik sebelumnya (melintasi ke belakang di sepanjang elemen adik-beradik dalam pokok DOM, bukannya ke hadapan).

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".father div").prevUntil(".firstp","span").css({"color":"red","border":"4px solid blue"}) }); </script> <style type="text/css"> .father { height:200px; width:200px; border:1px solid blue; } </style> </head> <body> <div class="father"> <p class="firstp">我是p元素</p> <span>我是span元素</span> <p>我是p元素</p> <div>我是div元素</div> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

jQuery lintasan mendatar

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]