jquery mendapat nilai elemen anak mana

Dalam pembangunan bahagian hadapan, kita selalunya perlu mendapatkan nilai elemen anak bagi sesuatu elemen. Sekiranya terdapat sedikit elemen kanak-kanak, tidaklah terlalu menyusahkan untuk mendapatkannya secara manual satu per satu, tetapi jika terdapat banyak elemen kanak-kanak, atau bilangannya tidak pasti, maka kaedah ini sudah pasti tidak boleh dilaksanakan. Pada masa ini, dengan bantuan fungsi berkuasa jQuery, kita boleh mendapatkan nilai sub-elemen di bawah elemen dengan mudah.

Pertama, mari kita lihat contoh. Katakan kita mempunyai kod HTML berikut:

<div id="container">
  <div class="child">第1个子元素</div>
  <div class="child">第2个子元素</div>
  <div class="child">第3个子元素</div>
  <div class="child">第4个子元素</div>
  <div class="child">第5个子元素</div>
</div>

Sekarang kita perlu mendapatkan nilai elemen anak ke-3. Menurut sintaks jQuery, kita boleh menggunakan kod berikut:

var thirdChild = $('#container .child:eq(2)').text();
alert(thirdChild);

Di sini kita menggunakan sintaks pemilih jQuery, iaitu, mula-mula pilih elemen kontena melalui $('#container'), dan kemudian gunakan .child untuk menentukan elemen anak. untuk diperolehi Nama kelas, gunakan :eq(2) pada penghujung untuk menentukan bahawa elemen anak ketiga akan diperolehi. Ambil perhatian bahawa indeks di sini dikira daripada 0, jadi gunakan 2 bukannya 3.

Kami juga boleh menggunakan beberapa sintaks pemilih jQuery lain, seperti menggunakan :first untuk mendapatkan nilai elemen anak pertama, menggunakan :last untuk mendapatkan nilai elemen anak terakhir, menggunakan :odd dan :even Dapatkan nilai semua sub-elemen ganjil dan genap, dsb.

var firstChild = $('#container .child:first').text();
var lastChild = $('#container .child:last').text();
var oddChildren = $('#container .child:odd').text();
var evenChildren = $('#container .child:even').text();
alert(firstChild);
alert(lastChild);
alert(oddChildren);
alert(evenChildren);

Selain menggunakan sintaks pemilih, kita juga boleh menggunakan fungsi children() jQuery untuk mendapatkan semua elemen anak bagi sesuatu elemen, dan kemudian tentukan nilai elemen anak yang mana untuk melalui indeks eq(). Contohnya:

var thirdChild = $('#container').children('.child').eq(2).text();
alert(thirdChild);

Kod di sini sangat serupa dengan contoh pertama, satu-satunya perbezaan ialah penggunaan children() fungsi dan eq() indeks.

Perlu diambil perhatian bahawa semasa proses pembangunan sebenar, mungkin terdapat situasi di mana bilangan sub-elemen tidak pasti, seperti kandungan yang dimuatkan secara dinamik melalui Ajax. Pada masa ini, kita boleh menggunakan fungsi children() untuk mendapatkan semua elemen anak, kemudian gunakan atribut .length untuk mendapatkan bilangan elemen anak, dan kemudian menjana indeks secara dinamik untuk mendapatkan nilai elemen anak. Contohnya:

var numChildren = $('#container').children('.child').length; // 获取子元素的数量
for(var i=0; i<numChildren; i++) {
  var childText = $('#container').children('.child').eq(i).text(); // 动态生成索引获取每个子元素的值
  alert('第' + (i+1) + '个子元素的值是：' + childText);
}

Dalam kod di atas, kami menggunakan fungsi penyambungan gelung dan rentetan for untuk mendapatkan nilai semua sub-elemen dalam kelompok dan memaparkannya satu demi satu.

Akhir sekali, perlu diingatkan bahawa dalam jQuery, .eq() dan :eq() mempunyai fungsi yang sama, iaitu sintaks fungsi dan pemilih untuk mendapatkan elemen tertentu dalam koleksi elemen berdasarkan indeks. Tetapi dalam beberapa kes, kerana pemilih perlu dipermudahkan, menggunakan sintaks :eq() mungkin lebih mudah untuk difahami dan ditulis.

Atas ialah kandungan terperinci jquery mendapat nilai elemen anak mana. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!