Bagaimana untuk mendapatkan kedudukan elemen pada halaman dengan jquery

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan traversal dokumen HTML, pengendalian acara, kesan animasi dan operasi AJAX. Dalam pembangunan JavaScript, selalunya perlu untuk mendapatkan kedudukan elemen pada halaman dan kedudukan indeks elemen dalam senarai Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mendapatkan kedudukan elemen pada halaman dan indeks kedudukan elemen yang dipilih dalam senarai.

1. Dapatkan kedudukan elemen pada halaman

Dalam jQuery, anda boleh menggunakan .position(), .offset(), .scrollTop() dan kaedah lain untuk mendapatkan kedudukan elemen pada halaman. Di sini kita mengambil kaedah .position() sebagai contoh:

$(selector).position()

Antaranya, selector mewakili pemilih CSS bagi elemen yang kedudukannya akan diperolehi Kaedah ini akan mengembalikan objek yang mengandungi kedua-dua top dan left atribut. Kedua-dua sifat ini mewakili nilai piksel bagi bahagian atas dan tepi kiri elemen, masing-masing, berbanding dengan nenek moyang kedudukan terdekatnya. Jika tiada unsur nenek moyang diletakkan, ia adalah relatif kepada sudut kiri atas dokumen.

Sebagai contoh, jika anda mempunyai struktur HTML berikut:

<div id="parent" style="position:relative">
  <div id="child" style="position:absolute; top:10px; left:20px;"></div>
</div>

, anda boleh menggunakan kod berikut untuk mendapatkan kedudukan elemen #child berbanding elemen induknya #parent:

$("#child").position() // {top: 10, left: 20}

2 Dapatkan kedudukan indeks elemen yang dipilih dalam senarai

Dalam jQuery, anda boleh menggunakan kaedah .index() untuk mendapatkan kedudukan indeks elemen yang dipilih dalam elemen induknya. Kaedah ini hanya berfungsi pada elemen tahap yang sama, jika tidak ralat akan dilemparkan.

Sebagai contoh, jika anda mempunyai struktur HTML berikut:

<ul>
  <li>香蕉</li>
  <li class="selected">苹果</li>
  <li>橙子</li>
  <li>葡萄</li>
</ul>

, anda boleh menggunakan kod berikut untuk mendapatkan kedudukan indeks bagi elemen yang dipilih .selected dalam elemen induknya ul:

$("ul li.selected").index() // 1

Perlu diambil perhatian bahawa kaedah index() mula mengira dari 0, jadi hasil 1 bermakna kedudukan elemen yang dipilih dalam senarai ul adalah yang kedua . Jika anda ingin mula mengira dari 1, anda boleh lulus 1 dalam parameter kaedah, seperti:

$("ul li.selected").index() + 1 // 2

bermakna kedudukan elemen yang dipilih dalam senarai ul ialah yang kedua .

Apabila menggunakan kaedah index(), jika elemen tidak dipilih, -1 akan dikembalikan.

$("ul li").index($("ul li.unselected")) // -1

Ringkasan

Menggunakan jQuery untuk mendapatkan kedudukan elemen pada halaman dan kedudukan indeks elemen yang dipilih dalam senarai boleh mencapai banyak operasi interaktif dengan mudah. Perlu diingatkan bahawa kedudukan elemen pada halaman dan kedudukan indeks dalam senarai adalah relatif kepada elemen induknya, jadi anda perlu memberi perhatian kepada struktur HTML dan gaya CSS apabila menggunakannya.

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