Bagaimana untuk mendapatkan kedudukan elemen dalam elemen induknya dengan jquery

PHPz
Lepaskan: 2023-04-17 14:41:21
asal
1236 orang telah melayarinya

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>
Salin selepas log masuk

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
Salin selepas log masuk

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>
Salin selepas log masuk

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
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan