Masukan pemilih jquery [type = text] ')

98

Saya menulis kode yang pada dasarnya memilih semua input type=textelemen seperti ini:

$('.sys input[type=text]').each(function () {}

Bagaimana cara mengubahnya untuk memilih input[type=text]atau select?

javascript jquery Mendongkrak
sumber

Jawaban:

177

Menggunakan pemilih css normal:

$('.sys input[type=text], .sys select').each(function() {...})

Jika Anda tidak menyukai pengulangan:

$('.sys').find('input[type=text],select').each(function() {...})

Atau lebih singkatnya, berikan contextargumen:

$('input[type=text],select', '.sys').each(function() {...})

Catatan: Secara internal jQueryakan mengubah yang di atas menjadi find()setara

http://api.jquery.com/jQuery/

Secara internal, konteks pemilih diimplementasikan dengan metode .find (), jadi $ ('span', this) setara dengan $ (this) .find ('span').

Saya pribadi menemukan alternatif pertama yang paling mudah dibaca :), pendapat Anda

Andreas Wong
sumber
1
Karena context formmenggunakan the find form, maka find formlebih efisien daripada context form(satu fungsi panggilan dihindari). Ini berlaku untuk hampir semua selektor yang digunakan. Kemudian, IMO find formlebih efisien daripada normal CSS selector, karena kedua bagian selektor relatif terhadap simpul akar, di mana di find form, hanya .sysbagian yang relatif terhadapnya, kemudian input[type=text],selectdijalankan pada sekumpulan elemen yang jauh lebih kecil sehingga mungkin lebih cepat (tapi perlu ini harus diverifikasi dengan tes)
pomeh
1
@pomeh Saya dapat melihat dari mana Anda berasal, tetapi jika kinerja $panggilan begitu penting untuk aplikasi Anda, harap hindari menggunakan jQuery sama sekali :). Jawaban ini mencoba menjawab pertanyaan OP, jika itu adalah pertanyaan kinerja, jawaban ini tidak akan ada di sini. Bagaimanapun juga, terima kasih atas komentarnya :), terima kasih
Andreas Wong
1
komentar saya bukan tentang kinerja satu $panggilan, tetapi tentang semua $panggilan yang hadir dalam satu aplikasi. IMO, ketika Anda memiliki cara berbeda untuk melakukan hal yang sama, saya mencoba untuk selalu memilih salah satu yang berkinerja lebih baik bc. slow performance=== unhappy users. Juga, kami berdua dapat menjawab pertanyaan OP dengan banyak jawaban (seperti yang Anda lakukan) dan memberikan keuntungan / ketidaknyamanan masing-masing (seperti yang saya lakukan di komentar). IMO penting untuk memperhatikan mengapa semua jawaban berbeda, sambil memberikan hasil yang sama. Selain itu, kita dapat menulis kode JavaScript vanilla yang bekerja lambat JavaScriptperformance
:!
1
@pomeh Poin saya tentang kinerja adalah, jika Anda benar-benar peduli dengan kinerja, jangan gunakan jQuery $, klasifikasikan div Anda secara khusus dan gunakan document.getElemenById/ElementsByClassName, daripada melalui $yang melakukan banyak pemeriksaan / parsing string dari pemilih Anda, jQuery tidak terkenal untuk perpustakaan kinerjanya. Dan sejujurnya saya belum pernah melihat aplikasi melambat karena memanggil $terlalu banyak, jika Anda memiliki situs web yang memiliki masalah itu, tolong tunjukkan, saya sangat tertarik :)
Andreas Wong
2
@pomeh Ya, saya sepenuh hati setuju dengan poin Anda tentang JS! = Kinerja :), pada akhirnya, itu masih bergantung pada kami, para programmer untuk benar-benar menulis kode yang masuk akal. Terima kasih untuk diskusi singkatnya, semoga harimu menyenangkan :)
Andreas Wong
7 
$('.sys').children('input[type=text], select').each(function () { ... });

EDIT: Sebenarnya kode di atas ini setara dengan selektor anak .sys > input[type=text]jika Anda ingin memilih keturunan ( .sys input[type=text]) Anda perlu menggunakan opsi yang diberikan oleh @NiftyDude.

Informasi lebih lanjut:

Wouter J
sumber
Anda mengetik chilrenalih-alihchildren
pomeh
5

Jika Anda memiliki beberapa input sebagai teks dalam formulir atau tabel yang perlu Anda lakukan iterasi, saya melakukan ini:

var $list = $("#tableOrForm :input[type='text']");

$list.each(function(){
    // Go on with your code.
});

Apa yang saya lakukan adalah saya memeriksa setiap masukan untuk melihat apakah jenisnya disetel ke "teks", lalu itu akan mengambil elemen itu dan menyimpannya di daftar jQuery. Kemudian, itu akan mengulang melalui daftar itu. Anda dapat menyetel variabel temp untuk iterasi saat ini seperti ini:

var $currentItem = $(this);

Ini akan menyetel item saat ini ke iterasi Anda saat ini untuk setiap loop. Kemudian Anda dapat melakukan apa pun yang Anda inginkan dengan variabel temp.

Semoga ini bisa membantu siapa pun!

Jason Cidras
sumber
3 
$('input[type=text],select', '.sys');

untuk perulangan:

$('input[type=text],select', '.sys').each(function() {
   // code
});
theodeparadox
sumber