Cara yang lebih efisien untuk melakukan parent().parent().parent() dll di jquery
Dalam skrip yang saya tulis ini, saya menemukan diri saya menggunakan .parent() hingga tujuh kali berturut-turut untuk mendapatkan elemen. Meskipun ini berhasil, sepertinya ada cara yang lebih mudah untuk melakukan hal ini/fungsi yang tidak saya sadari. Adakah ide selain kelas/id yang lebih spesifik pada lebih banyak elemen?
Pada dasarnya, pertanyaan saya bermuara pada pengaksesan div dengan id outer ketika saya memiliki referensi ke span dengan id 'innerSpan' dalam html di bawah ini:
<div id='outer'>
<a href="some_url">
<span id="inner">bla bla</span>
</a>
</div>Jadi saat ini, saya akan melakukan sesuatu seperti ini:
var outer = $('#inner').parent().parent()
dan itu akan menjadi gila dengan elemen yang sangat bersarang.
Contoh lain:
Ini html saya:
<div id="options_right">
<table id="product_options_list" class="table table-bordered">
<tbody id="1">
<tr>
<td>
<select name="option_1_val[0]" class="option_table_select">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
</td>
<td>
<table class="table sub_options" id="0">
<tbody>
<tr>
<td>
<select name="option_1_sub[0][]" class="option_table_select sub_option_select">
<option value="">None</option>
<option value="2">Size</option>
</select>
<div class="sub_option_value_holder">
<select name="option_1_sub_val[0][]" class="sub_option_values" style="display:none;"></select>
</div>
</td>
<td>
<a href="#" class="remove_sub_option btn btn-primary">Remove</a>
</td>
<td>
<a href="#" class="add_sub_option btn btn-primary">Add Another</a>
</td>
</tr>
</tbody>
</table>
</td>dan skrip saya. saya menulis sebuah fungsi dan perlu meneruskannya id dari baris utama tbody serta id tabel sekunder sehingga saya dapat menambahkan lebih banyak baris secara dinamis. Anda tidak benar-benar membutuhkan fungsi itu untuk pertanyaan ini tetapi pada dasarnya saya mendapatkan id tersebut seperti itu:
get_suboption_row($(this).parent().parent().parent().parent().parent().parent().parent().attr('id'), $(this).parent().parent().parent().parent().attr('id'));terima kasih
jsFiddle:
klik tambahkan yang lain untuk memicu peristiwa
Anda memiliki 2 tabel bersarang,
untuk mendapatkan apa yang Anda inginkan, Anda dapat menggunakan dua metode penjelajahan DOM ini .closest() atau .parents()
.closest()Menelusuri pohon DOM sampai menemukan kecocokan untuk selektor yang diberikan.parents()Menelusuri pohon DOM ke elemen root dokumen, menambahkan setiap elemen leluhur ke koleksi sementara; kemudian menyaring koleksi tersebut berdasarkan selektor jika ada yang disediakan
Menggunakan tabel bersarang:
$(this).closest('table').closest('tbody').attr('id');< <!
$(this).parents('table').parents('tbody').attr('id');
Saya pikir .closest() adalah apa yang Anda cari :)
Jika Anda mengetahui Nama Kelas CSS untuk elemen itu, Anda bisa memanggil metode closest()
var thatParent= $("#someId").closest(".somCSSClassName")Jadi kode Anda dapat ditulis ulang sebagai
get_suboption_row($(this).closest("someClass").attr('id'),
$(this).closest("someOtherClass").attr('id'));EDIT : Setelah melihat JSfiddle Anda
Gunakan nama kelas untuk mendapatkan Tabel Induk.
alert($(this).closest('tbody').closest('.table-bordered').attr('id'));Contoh kerja :
