Akses elemen induk dengan javascript atau jQuery

Fungsi JavaScript biasanya memerlukan akses kepada elemen induk di DOM.

Dalam JavaScript, ia boleh dilaksanakan menggunakan

. element.parentNode

Dalam jQuery, anda boleh menggunakan

untuk mencapai fungsi yang sama. element.parent()

Berikut adalah contoh JavaScript:

html:

<ul id="tabs"></ul>
<li class="firsttab"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">one</a></li>
<li class="secondtab"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">two</a></li>

JavaScript:

function init() {
  var tablinks = document.getElementById('tabs').getElementsByTagName('a');
  for (var i = 0, j = tablinks.length; i < j; i++) {
    tablinks[i].onclick = doit;
  }
}

function doit() {
  alert(this.parentNode.className);
}

window.onload = init;

Soalan Lazim (FAQ) untuk mengakses elemen ibu bapa dalam JavaScript dan JQuery

Apakah perbezaan antara

dan parentElement dalam JavaScript? parentNode

Dalam JavaScript, kedua -dua

dan parentElement digunakan untuk mengakses elemen induk elemen tertentu. Walau bagaimanapun, terdapat nuansa antara keduanya. Atribut parentNode mengembalikan nod induk elemen sebagai objek nod, yang bermaksud ia boleh mengembalikan sebarang jenis nod (nod elemen, nod teks, nod komen, dll.). Sebaliknya, atribut parentNode mengembalikan nod induk sebagai objek elemen, yang bermaksud ia hanya mengembalikan nod elemen. Jika nod induk bukan nod elemen, parentElement akan kembali parentElement. null

Bagaimana menggunakan jQuery untuk mengakses elemen induk?

Dalam jQuery, anda boleh menggunakan kaedah

untuk mendapatkan elemen induk langsung elemen yang dipilih. Sebagai contoh, jika anda mempunyai elemen dengan id "anak", anda boleh mengakses elemen induknya seperti ini: parent(). Ini akan mengembalikan objek jQuery yang mengandungi elemen induk. $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bchild").parent()

Bolehkah saya mengakses unsur-unsur datuk atau unsur nenek moyang yang lebih tinggi di JavaScript?

Ya, anda boleh mengakses elemen datuk atau mana-mana elemen nenek moyang yang lebih tinggi melalui atribut Pautan

atau parentElement. Sebagai contoh, untuk mengakses elemen datuk elemen, anda boleh menggunakan parentNode. element.parentElement.parentElement

Apa yang berlaku kepada JavaScript jika elemen induk bukan elemen HTML?

Jika nod induk elemen bukan elemen HTML (contohnya, ia mungkin nod teks atau nod anotasi), atribut

pulangan parentElement. Walau bagaimanapun, harta null masih akan mengembalikan nod induk tanpa mengira jenisnya. parentNode

Bagaimana untuk mendapatkan semua elemen nenek moyang elemen tertentu dalam jQuery?

Dalam jQuery, anda boleh menggunakan kaedah

untuk mendapatkan semua elemen nenek moyang elemen tertentu. Sebagai contoh, parents() akan mengembalikan objek jQuery yang mengandungi semua elemen nenek moyang elemen dengan anak id '. $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bchild").parents()

Bolehkah saya menapis elemen induk yang diperoleh menggunakan jQuery?

Ya, anda boleh menapis unsur induk yang diperoleh menggunakan jQuery. Kedua -dua kaedah parent() dan parents() boleh menerima pemilih sebagai parameter, dan mereka hanya mengembalikan elemen induk yang sepadan dengan pemilih itu. Sebagai contoh, $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bchild").parents("div") hanya akan mengembalikan elemen nenek moyang sebagai div.

Bagaimana untuk mendapatkan elemen nenek moyang terdekat dalam JavaScript yang memenuhi syarat tertentu?

Dalam JavaScript, anda boleh menggunakan kaedah closest() untuk mendapatkan elemen nenek moyang yang paling dekat yang memenuhi syarat tertentu. Kaedah ini menerima pemilih sebagai parameter dan mengembalikan elemen nenek moyang terdekat yang sepadan dengan pemilih. Sebagai contoh, element.closest("div") akan mengembalikan elemen nenek moyang yang paling dekat sebagai Div.

Apakah perbezaan antara

dan parents() kaedah dalam closest()?

Dalam jQuery, kaedah parents() mengembalikan semua unsur nenek moyang yang memenuhi syarat tertentu, sementara kaedah closest() hanya mengembalikan unsur -unsur nenek moyang yang paling dekat yang memenuhi syarat. Jadi jika anda hanya memerlukan nenek moyang yang hampir sama, gunakan closest(). Jika anda memerlukan semua nenek moyang yang sepadan, gunakan parents().

Bolehkah saya mengakses elemen induk nod teks atau nod anotasi dalam JavaScript?

Ya, anda boleh menggunakan atribut parentNode untuk mengakses elemen induk nod teks atau nod anotat dalam JavaScript. Harta ini mengembalikan nod induk dari mana -mana jenis nod, termasuk nod teks dan nod komen.

Bagaimana untuk memeriksa sama ada elemen mempunyai elemen induk dalam JavaScript?

Dalam JavaScript, anda boleh menggunakan atribut parentElement atau parentNode untuk memeriksa sama ada elemen mempunyai elemen induk. Jika elemen mempunyai elemen induk, sifat -sifat ini mengembalikan elemen induk atau nod. Jika elemen tidak mempunyai elemen induk, sifat -sifat ini akan kembali null. Jadi, anda boleh menggunakan keadaan seperti if (element.parentElement) atau if (element.parentNode) untuk memeriksa sama ada elemen mempunyai elemen induk.

Atas ialah kandungan terperinci Akses elemen induk dengan javascript atau jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!