Cara mendapatkan hanya elemen anak langsung dengan fungsi jQuery

90

Saya memiliki struktur tabel seperti ini:

<table1>
  <tbody>
    <tr>
      <td></td>
        ...
      <td>
        <table2>
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
  </table>

Dalam javascript, saya memiliki variabel tbldengan nilai $(table1), dan kemudian saya ingin mendapatkan semua elemen anak langsung (tr) <tbody>dari table1. Kode saya adalah:

$('tr', tb1)

Rupanya itu mengembalikan semua <tr>elemen dalam tabel1 dan tabel2. Saya pikir saya bisa bertahan

$('tr', tb1).not(function(){return $(this).parent().parent()[0] != tb1;})

atau logika semacam ini.

Saya tahu $('table1 > tbody > tr')bisa mendapatkan anak langsung tr. Sayangnya saya tidak bisa menggunakan ini.

Ada yang punya ide bagus tentang ini?

Terima kasih.

Jason Li
sumber

Jawaban:

179

Anda dapat menggunakan find():

tbl.find("> tbody > tr")

Josh Leitzel
sumber
2
ini adalah ide yang berani. $ ('> tbody> tr', tb1) juga berfungsi untuk saya. Terima kasih.
Jason Li
1
Ini luar biasa, saya tidak tahu bahwa Anda dapat menggunakan pemilih anak langsung ( >) tanpa menentukan apa pun di depannya. Terima kasih.
Silkfire
3
Perhatikan bahwa untuk turunan langsung yang hanya satu tingkat ke bawah Anda dapat menggunakan 'children ([selector])'.
orad
37
DIRECT CHILDREN = anak-anak satu tingkat ke bawah , oleh karena itu api.jquery.com/children adalah jawaban yang benar, bukan find () - bahwa seseorang mendapat SEMUA keturunan elemen (disaring oleh selector) ...
jave.web
4
Anda harus membuat komentar Anda menjadi jawaban yang berbeda jave.Web karena milik Anda adalah jawaban yang benar.
mrmillsy
23

Seperti yang disebutkan @jave.web di komentar

Untuk mencari melalui turunan langsung dari suatu elemen digunakan .children(). Itu hanya akan mencari melalui anak-anak langsung dan tidak melintasi lebih dalam. http://api.jquery.com/children/

Chris
sumber
5

Inilah alasan mengapa seseorang harus berhati-hati dengan tabel bersarang. Saya sangat berharap Anda menggunakannya untuk data dan bukan tata letak halaman.

Masalah lain yang mungkin akan merusak hari Anda adalah menggunakan pemilih CSS pada tabel bersarang ... pada dasarnya Anda memiliki masalah yang sama - Anda tidak dapat memilih elemen TR dari tabel luar tanpa memilih yang ada di dalam tabel dalam juga. (Anda tidak dapat menggunakan pemilih anak karena tidak diterapkan di IE6)

Ini harus bekerja:

$("#table1 > tbody > tr")

Namun, saya menganjurkan agar Anda melakukan hardcode elemen TBODY, karena Anda tidak boleh mengandalkan browser untuk membuatnya untuk Anda.

Šime Vidas
sumber
2

http://api.jquery.com/child-selector/

$('tb1 > tr')

Jeremy
sumber
2
Ini hanya akan berfungsi jika tb1merupakan tag HTML, padahal bukan; dan jika tradalah anak langsung darinya (yang bukan, itu adalah anak langsung dari <tbody>).
Josh Leitzel