Bagaimana untuk mendapatkan kedudukan elemen dalam elemen induknya dengan jquery

jQuery ialah perpustakaan JavaScript popular yang sering digunakan untuk mengendalikan operasi berkaitan HTML dan CSS. Apabila menggunakan jQuery untuk manipulasi DOM, keperluan biasa adalah untuk mendapatkan kedudukan elemen dalam elemen induknya. Artikel ini akan menunjukkan kepada anda cara menggunakan jQuery untuk mendapatkan kedudukan elemen dalam elemen induknya.

Pertama, kita perlu memahami kaedah index() dalam jQuery dan penggunaan serta tujuannya. Kaedah index() digunakan untuk mengembalikan nilai indeks unsur dalam nod saudaranya. Sebagai contoh, kami mempunyai struktur HTML berikut:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Kami ingin mendapatkan nilai indeks elemen <li> kedua dalam nod saudaranya, kami boleh menggunakan kod jQuery berikut:

var index = $("li:eq(1)").index();
console.log(index); // 输出 1

Kod di atas menunjukkan bahawa kami mula-mula menggunakan pemilih $（“li:eq(1)”） untuk memilih elemen <li> kedua, dan kemudian memanggil kaedah index() untuk mendapatkan nilai indeks elemen dalam nod saudaranya. Memandangkan elemen ini adalah adik beradik kedua, indeksnya ialah 1.

Walau bagaimanapun, bagaimana jika kita ingin mendapatkan kedudukan elemen dalam elemen induknya dan bukannya nod saudaranya? Pada masa ini kita perlu menggunakan gabungan tiga kaedah parent(), children() dan index() untuk mencapai matlamat ini. Berikut ialah contoh konkrit:

<ul>
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Dalam struktur HTML di atas, kita mempunyai elemen <ul> yang mengandungi empat <li> elemen. Salah satu elemen <li> mempunyai kelas selected yang mengenal pastinya sebagai elemen yang dipilih. Kami ingin mengetahui kedudukan elemen <li> yang dipilih dalam elemen induknya.

Kita boleh menggunakan kod jQuery berikut untuk mencapai ini:

var selectedLi = $("li.selected");
var parentUl = selectedLi.parent();
var index = parentUl.children("li").index(selectedLi);
console.log(index); // 输出 1

Kod di atas mula-mula menggunakan pemilih $（“li.selected”） untuk memilih elemen selected dengan kelas <li>, dan kemudian gunakan Kaedah parent() untuk mendapatkan elemen induknya <ul>. Seterusnya, kami menggunakan kaedah children("li") untuk mendapatkan semua <ul> elemen anak di bawah elemen <li> dan menggunakan kaedah index() untuk mendapatkan kedudukan elemen <li> yang dipilih dalam elemen induknya.

Hasilnya, nombor yang diperolehi ialah 1, bermakna elemen <li> yang dipilih adalah yang kedua dalam elemen induknya.

Ringkasnya, dengan menggabungkan tiga kaedah parent(), children() dan index(), kita boleh mendapatkan kedudukan elemen dalam elemen induknya dengan mudah. Ini adalah keperluan yang sangat biasa untuk jQuery dalam operasi DOM, dan ia juga merupakan salah satu kaedah paling praktikal dalam jQuery.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kedudukan elemen dalam elemen induknya dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!