Dapatkan anak kedua menggunakan jQuery

$(t).html()

kembali

<td>test1</td><td>test2</td>

Saya ingin mengambil yang kedua tddari $(t)objek. Saya mencari solusi tetapi tidak ada yang berhasil. Adakah yang tahu bagaimana cara mendapatkan elemen kedua?

ambil anak kedua:

$(t).children().eq(1);

atau, ambil anak kedua <td>:

$(t).children('td').eq(1);

Inilah solusi yang mungkin lebih jelas untuk dibaca dalam kode:

Untuk mendapatkan anak ke-2 dari daftar yang belum dipesan:

   $('ul:first-child').next()

Dan contoh yang lebih terperinci: Kode ini mendapatkan teks atribut 'title' dari elemen anak ke-2 UL yang diidentifikasi sebagai 'my_list':

   $('ul#my_list:first-child').next().attr("title")

Dalam contoh kedua ini, Anda dapat menyingkirkan 'ul' di awal pemilih, karena berlebihan, karena ID harus unik untuk satu halaman. Itu ada di sana hanya untuk menambah kejelasan pada contoh.

Catatan tentang Kinerja dan Memori , dua contoh ini adalah kinerja yang baik, karena mereka tidak membuat jquery menyimpan daftar elemen ul yang harus disaring sesudahnya.

Bagaimana dengan ini:

$(t).first().next()

PEMBARUAN UTAMA:

Terlepas dari betapa cantiknya jawaban itu, Anda juga harus memikirkan kinerja kode. Oleh karena itu, juga relevan untuk mengetahui apa sebenarnya yang ada dalam $(t)variabel. Apakah array <TD>atau <TR>node dengan beberapa <TD>sdi dalamnya? Untuk mengilustrasikan poin lebih lanjut, lihat skor jsPerf pada <ul>daftar dengan 50 <li>anak:

http://jsperf.com/second-child-selector

The $(t).first().next()metode adalah yang tercepat di sini, jauh.

Tetapi, di sisi lain, jika Anda mengambil <tr>simpul dan menemukan <td>anak - anak dan menjalankan tes yang sama, hasilnya tidak akan sama.

Semoga ini bisa membantu. :)

Saya tidak melihatnya disebutkan di sini, tetapi Anda juga dapat menggunakan penyeleksi spec CSS. Lihat dokumen

$('#parentContainer td:nth-child(2)')

Coba ini:

$("td:eq(1)", $(t))

atau

$("td", $(t)).eq(1)

Selain menggunakan metode jQuery, Anda dapat menggunakan cellskoleksi asli yang diberikan <tr>kepada Anda.

$(t)[0].cells[1].innerHTML

Dengan asumsi tadalah elemen DOM, Anda bisa melewati pembuatan objek jQuery.

t.cells[1].innerHTML

_{Sangat mengejutkan melihat bahwa tidak ada yang menyebutkan cara JS asli untuk melakukan ini ..}

Tanpa jQuery:

Cukup akses childrenproperti dari elemen induk. Ini akan mengembalikan HTMLCollection langsung dari elemen anak-anak yang dapat diakses dengan indeks. Jika Anda ingin mendapatkan anak kedua:

parentElement.children[1];

Dalam kasus Anda, sesuatu seperti ini bisa berfungsi: (contoh)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

Anda juga dapat menggunakan kombinasi pemilih CSS3 / querySelector()dan memanfaatkan :nth-of-type(). Metode ini dapat berfungsi lebih baik dalam beberapa kasus, karena Anda juga dapat menentukan jenis elemen, dalam hal ini td:nth-of-type(2) (contoh)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

Gunakan .find()metode

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

Anda dapat menggunakan dua metode dalam jQuery seperti yang diberikan di bawah ini-

Menggunakan jQuery: nth-child Selector Anda telah meletakkan posisi elemen sebagai argumennya yaitu 2 saat Anda ingin memilih elemen li kedua.

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

Menggunakan jQuery: eq () Selector

Jika Anda ingin mendapatkan elemen yang tepat, Anda harus menentukan nilai indeks item. Elemen daftar dimulai dengan indeks 0. Untuk memilih elemen 2 li, Anda harus menggunakan 2 sebagai argumen.

$( "ul li:eq(1)" ).click(function(){
  //do something
});

Lihat Contoh: Dapatkan Elemen Anak Kedua Daftar di jQuery