Bagaimana untuk mendapatkan nod elemen induk, nod elemen anak dan nod elemen saudara dengan jQuery_jquery

Contoh dalam artikel ini menerangkan cara jQuery memperoleh nod elemen induk, nod elemen anak dan nod elemen adik beradik. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mari kita lihat kod html ini dahulu Keseluruhan kaedah mendapatkan nod (bapa, anak, abang, dll.) adalah berdasarkan kod ini:

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

Pemerolehan nod induk JQUERY:

Terdapat banyak cara untuk mendapatkan elemen induk dalam jquery, seperti parent(), parents(), closest(), find, first-child, yang boleh membantu anda mencari nod induk, nod anak dan nod adik beradik

Sebagai contoh, kami menggunakan parent() untuk mendapatkan nod induk

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

Seterusnya, kita akan bercakap tentang perbezaan antara kaedah ibu bapa() dan terdekat()

1 yang paling hampir mula memadankan dan mencari daripada elemen semasa, dan ibu bapa mula memadankan dan mencari daripada elemen induk

2. Carian terdekat ke atas langkah demi langkah sehingga ia menemui elemen yang sepadan dan kemudian berhenti mencari ke atas sehingga elemen akar, kemudian meletakkan elemen ini ke dalam koleksi sementara, dan kemudian menggunakan ungkapan pemilih yang diberikan untuk Tapis

.

3 paling hampir mengembalikan 0 atau 1 elemen, ibu bapa mungkin mengandungi 0, 1 atau berbilang elemen

Kod boleh ditulis seperti ini:

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

Mendapatkan nod adik-beradik JQUERY

Pemerolehan nod adik-beradik JQuery, idea kami adalah untuk mencari nod induk melalui nod semasa, dan kemudian mencari nod anak melalui nod induk, kodnya adalah seperti berikut

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

Kaedah lain ialah menggunakan fungsi adik beradik(), kodnya adalah seperti berikut

$(".title").siblings('ul');
//找到自己的兄弟节点ul

Mendapatkan nod anak JQUERY

Padan dengan elemen anak pertama: pertama hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu elemen anak untuk setiap elemen induk

$(".par:first-child");
//取得id为firstli的节点

Dapatkan melalui pemilih, kodnya adalah seperti berikut:

$('#firstli h3.title');
//取得条目一的h3

Gunakan fungsi find(), seperti yang dinyatakan di atas, penggunaannya adalah sama

$("#firstli").find("h3");
//找到子兄弟节点h3

Gunakan fungsi children(), kodnya adalah seperti berikut

$("#firstli").children("h3.title");
//取得子节点h3、class为title 

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Algoritma traversal JQuery dan ringkasan kemahiran", "ringkasan kemahiran operasi jadual (jadual) jQuery " , "Ringkasan kesan dan teknik seret jQuery", "Ringkasan teknik sambungan jQuery", "Ringkasan kesan khas klasik biasa jQuery" , "ringkasan penggunaan jQuery dan kesan khas", "ringkasan penggunaan pemilih jquery" dan "ringkasan pemalam dan penggunaan biasa jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.