Tetapkan indeks melalui jquery

Tetapkan indeks melalui jquery

Dalam pembangunan web, selalunya perlu untuk mendapatkan atau menetapkan kedudukan elemen antara elemen adik beradik, yang memerlukan penggunaan indeks. jQuery menyediakan kaedah yang sangat mudah untuk mendapatkan atau menetapkan indeks sesuatu elemen.

1. Dapatkan indeks elemen

Sebagai contoh, dalam struktur kod berikut, kita perlu mendapatkan indeks elemen li:

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

Mendapatkan indeks menggunakan jQuery adalah sangat mudah, hanya perlu Hanya gunakan kaedah index():

$("li").click(function(){
  var index = $(this).index();
  alert(index);
});

Maksud kod ini ialah: apabila elemen li diklik, dapatkan kedudukannya dalam elemen adik-beradik dan maklumkannya.

2. Tetapkan indeks elemen

Kadangkala, adalah perlu untuk menukar kedudukan elemen secara dinamik antara elemen adik-beradik. Sebagai contoh, kedudukan semasa elemen li ialah 2, dan saya mahu menukarnya kepada 1.

<ul>
  <li>第一个</li>
  <li>第三个</li>
  <li>第二个</li>
</ul>

Pada masa ini, anda boleh menggunakan kaedah after() atau before() yang disediakan oleh jQuery untuk mencapai:

$("li:eq(2)").after($("li:eq(0)"));

Maksud kod ini ialah: letakkan elemen dengan indeks 2 ( yang ketiga ) bergerak ke hadapan elemen dengan indeks 0 (yang pertama), iaitu kedudukan menjadi 1.

Selain menggunakan kaedah after() atau before(), anda juga boleh menggunakan kaedah appendTo() atau prependTo(). Sebagai contoh, saya ingin mengalihkan elemen li ketiga ke hadapan:

$("li:eq(2)").prependTo($("ul"));

Maksud kod ini ialah: tambah elemen dengan indeks 2 (yang ketiga) pada ul, tetapi letakkannya di hadapan , iaitu kedudukan menjadi 0.

Ringkasan:

Anda boleh mendapatkan atau menetapkan kedudukan elemen dengan mudah melalui jQuery Memilih kaedah yang sesuai mengikut keperluan anda boleh merealisasikan fungsi dengan lebih baik.

Atas ialah kandungan terperinci Tetapkan indeks melalui jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!