Cara mendapatkan semua input turunan dari elemen div (jQuery)

158

HTML:

<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="" /></td>
    </tr>
  </table>
</div>

Saya perlu memilih semua input dalam div tertentu.

Ini tidak berfungsi:

var i = $("#panel > :input");
pengguna137348
sumber

Jawaban:

301

Gunakan tanpa lebih dari:

$("#panel :input");

The >berarti hanya langsung anak-anak dari elemen, jika Anda ingin semua anak-anak tidak peduli kedalaman hanya menggunakan spasi.

Nick Craver
sumber
3
Menarik ... Sekarang saya bingung ... Ini :untuk kelas semu, bukan? Tetapi kami ingin memilih jenis elemen. Mengapa :?
mnemosyn
11
@mnemosyn - Ini adalah jenis pemilih lain seperti `: checkbox 'is, lihat di sini untuk detail: api.jquery.com/input-selector Dan ini daftar yang lebih lengkap: api.jquery.com/category/selectors/form -selektor
Nick Craver
74

Kamu butuh

var i = $("#panel input"); 

atau , tergantung pada apa yang Anda inginkan (lihat di bawah)

var i = $("#panel :input"); 

yang >akan membatasi untuk anak-anak, Anda ingin semua keturunan.

EDIT: Seperti yang ditunjukkan Nick, ada perbedaan tipis antara $("#panel input")dan $("#panel :input).

Yang pertama hanya akan mengambil elemen input tipe, yaitu <input type="...">, tetapi tidak <textarea>, <button>dan <select>elemen. Terima kasih Nick, tidak tahu ini sendiri dan memperbaiki posting saya. Meninggalkan kedua opsi, karena saya kira OP tidak menyadarinya dan -teknis- meminta input ... :-)

mnemosyn
sumber
Jadi,: input akan memilih semua kolom input / select / textarea? Semua sekaligus?
Yuri
Intinya ya. Selector mengembalikan deretan korek api, jadi saya kira Anda bisa mengatakan itu melakukannya sekaligus, meskipun saya tidak begitu yakin apa yang Anda maksud dengan itu ...
mnemosyn
1
Maksudku, "bersama-sama" hanya dengan pemilih itu. ": input selector Keterangan: Memilih semua input, textarea, pilih dan elemen tombol." Tidak tahu tentang itu, saya akan menggunakannya mulai sekarang :)
Yuri
50

Metode 'temukan' dapat digunakan untuk mendapatkan semua input anak dari sebuah wadah yang telah di-cache untuk menyimpannya dengan mencari lagi (sedangkan metode 'anak-anak' hanya akan mendapatkan anak-anak langsung). misalnya

var panel= $("#panel");
var inputs = panel.find("input");
Rob Willis
sumber
5
Ini sempurna bagi saya - saya mengulang elemen menggunakan .each () yang berarti dalam loop saya mengakses elemen saat ini menggunakan $ (ini). Akibatnya, saya tidak dapat melakukan banyak hal yang dinyatakan dalam jawaban. - Sebaliknya saya dapat melakukan $ (ini) .find ("input"); Terima kasih.
djbp
29

Jika Anda menggunakan kerangka kerja seperti Ruby on Rails atau Spring MVC Anda mungkin perlu menggunakan divs dengan kawat gigi persegi atau karakter lainnya, yang tidak diperbolehkan dapat Anda gunakan document.getElementByIddan solusi ini masih berfungsi jika Anda memiliki beberapa input dengan tipe yang sama.

var div = document.getElementById(divID);
$(div).find('input:text, input:password, input:file, select, textarea')
        .each(function() {
            $(this).val('');
        });
$(div).find('input:radio, input:checkbox').each(function() {
    $(this).removeAttr('checked');
    $(this).removeAttr('selected');
});

Contoh ini menunjukkan cara menghapus input, untuk contoh Anda, Anda harus mengubahnya.

Paulo Fidalgo
sumber
9
var i = $("#panel input");

harus bekerja :-)

> hanya akan menjemput anak-anak langsung, tidak ada anak-anak anak
- anak : adalah untuk menggunakan kelas semu, misalnya. : arahkan, dll.

Anda dapat membaca tentang penyeleksi css yang tersedia dari kelas semu di sini: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Phil Rykoff
sumber
6
@henchman - :inputadalah pemilih juga, api.jquery.com/category/selectors/form-selectors Jika ia memiliki <textarea>tombol atau inputtidak akan menemukannya, :inputakan, jadi ada perbedaan.
Nick Craver
+1, jadi meninggalkan> akan melakukan trik. sekarang saya juga menemukannya di halaman yang saya rekomendasikan ....
Phil Rykoff
9

inilah pendekatan saya:

Anda bisa menggunakannya di acara lain.

var id;
$("#panel :input").each(function(e){	
  id = this.id;
  // show id 
  console.log("#"+id);
  // show input value 
  console.log(this.value);
  // disable input if you want
  //$("#"+id).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="Po Val" /></td>
    </tr>
  </table>
</div>

Uttam Kumar Roy
sumber