jQuery ATAU Selector?

325

Saya bertanya-tanya apakah ada cara untuk memiliki "OR" logika di pemilih jQuery. Sebagai contoh, saya tahu elemen adalah turunan dari elemen dengan class classA atau classB, dan saya ingin melakukan sesuatu seperti elem.parents('.classA or .classB'). Apakah jQuery menyediakan fungsionalitas seperti itu?

jquery jquery-selectors Suan
sumber

Jawaban:

494

Gunakan koma.

'.classA, .classB'

Anda dapat memilih untuk menghilangkan spasi.

Daniel A. White
sumber
43
Perlu dicatat bahwa ini bukan pemilih 'atau', lebih seperti beberapa penyeleksi dalam satu.
alex
49
@ alex: tetapi itu tidak akan memilih elemen yang sama dua kali (yang operator concatenation akan). Ini benar-benar adalah pemilih ATAU karena menciptakan UNION dari dua set atau lebih (sedangkan AND adalah persimpangan).
cletus
Terima kasih, itu berhasil. Karena pengawasan debug saya berpikir bahwa menggunakan koma berarti 'DAN'.
Suan
38
ANDakan .classA.classB.
Daniel A. White
2
Ini sebenarnya tergantung pada apa yang tersirat dari pertanyaan awal ... yaitu: secara klasik operator 'atau' akan mengalami hubungan pendek. Jadi operator 'atau' dalam bahasa jquery, mungkin bisa mengalami hubungan pendek juga.
Mathew
71

Menggunakan koma mungkin tidak cukup jika Anda memiliki beberapa objek jQuery yang perlu digabungkan.

Metode .add () menambahkan elemen yang dipilih ke set hasil:

// classA OR classB
jQuery('.classA').add('.classB');

Ini lebih bertele-tele daripada '.classA, .classB', tetapi memungkinkan Anda membangun pemilih yang lebih kompleks seperti berikut:

// (classA which has <p> descendant) OR (<div> ancestors of classB)
jQuery('.classA').has('p').add(jQuery('.classB').parents('div'));
Puncak gunung
sumber
22

Saya telah menulis plugin (5 baris kode) yang sangat sederhana untuk fungsi ini:

http://byrichardpowell.github.com/jquery-or/

Ini memungkinkan Anda untuk secara efektif mengatakan "dapatkan elemen ini, atau jika elemen itu tidak ada, gunakan elemen ini". Sebagai contoh:

$( '#doesntExist' ).or( '#exists' );

Sementara jawaban yang diterima menyediakan fungsionalitas yang serupa dengan ini, jika kedua penyeleksi (sebelum & setelah koma) ada, kedua penyeleksi akan dikembalikan.

Saya harap ini terbukti bermanfaat bagi siapa saja yang mungkin mendarat di halaman ini melalui google.

Oleh Richard Powell
sumber
4
Itu bukan cara kerja boolean ATAU operator. Jika kedua penyeleksi mengembalikan elemen, operator ATAU harus mengembalikan semuanya dan tidak hanya elemen pemilih pertama. Plugin Anda harus dinamai "ifEmpty" atau "else" atau sesuatu seperti itu.
Alp
13
@Alp: Pertimbangkan perilaku "a" || "b"vs null || "b"di vanilla JS. Jika kita menerapkan perilaku yang sama di sini, $(a).or(b)harus kembali $(a)jika ada, jika tidak maka akan kembali $(b). Saya tidak berpikir ada yang salah dengan nomenklatur ini, karena "atau" cocok dengan perilaku JS "||" (atau) operator.
FtDRbwLXw6
4
Saya juga melihatnya sebagai or. Apa yang dibicarakan orang lain lebih seperti sebuah concatatau mergetindakan.
Léon Pelletier
1
Secara pribadi saya tidak akan menyebut ini "atau", karena dapat menimbulkan kebingungan (bahkan jika secara teknis mungkin benar karena ini adalah jenis khusus jika / atau). Ini secara efektif null coalescence, yang disebut hal yang berbeda dan memiliki operator yang berbeda dalam bahasa yang berbeda: en.wikipedia.org/wiki/Null_coalescing_operator
JanErikGunnar
Istilah 'xor' (eksklusif atau) akan menjadi istilah yang akurat, tetapi sering kali orang mencari atau ketika mencari xor, karena xor umumnya, dalam istilah umum, jenis spesifik 'atau'.
liljoshu
17

Jika Anda ingin menggunakan konstruk standar elemen = element1 || element2 di mana JavaScript akan mengembalikan yang pertama yang benar, Anda dapat melakukan hal itu:

element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');

yang akan mengembalikan elemen pertama yang sebenarnya ditemukan. Tetapi cara yang lebih baik mungkin adalah dengan menggunakan konstruk koma pemilih jQuery (yang mengembalikan array elemen yang ditemukan) dengan cara ini:

element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];

yang akan mengembalikan elemen yang ditemukan pertama kali.

Saya menggunakannya dari waktu ke waktu untuk menemukan elemen aktif dalam daftar atau elemen default jika tidak ada elemen aktif. Sebagai contoh:

element = $('ul#someList').find('li.active, li:first')[0]

yang akan mengembalikan li dengan kelas aktif atau, jika tidak ada, hanya akan mengembalikan li terakhir.

Entah akan bekerja. Namun, ada penalti kinerja potensial, sebagai || akan berhenti memproses segera setelah ia menemukan sesuatu yang benar sedangkan pendekatan array akan mencoba untuk menemukan semua elemen bahkan jika telah menemukan yang sudah. Kemudian lagi, menggunakan || konstruk berpotensi memiliki masalah kinerja jika harus melalui beberapa penyeleksi sebelum menemukan yang akan kembali, karena ia harus memanggil objek jQuery utama untuk masing-masing (saya benar-benar tidak tahu apakah ini adalah hit kinerja atau tidak, sepertinya logis kalau bisa). Secara umum, saya menggunakan pendekatan array ketika pemilih adalah string yang agak panjang.

Ken Dickinson
sumber
Saya pikir find ('. SomethingToBeFound, .somethingElseToBeFound') tidak sama dengan || membangun. Karena temukan jika .somethingElseToBeFound ada di DOM sebelum .somethingToBeFound, itu akan dikembalikan bahkan jika .somethingToBeFound ada.
remo
0

Akhirnya saya menemukan hack bagaimana melakukannya:

div:not(:not(.classA,.classB)) > span

(memilih div dengan kelas classAATAU classBdengan rentang anak langsung)

midlan
sumber
-2

Daniel A. White Solution sangat cocok untuk kelas.

Saya punya situasi di mana saya harus menemukan bidang input seperti donee_1_card di mana 1 adalah indeks.

Solusi saya telah 

$("input[name^='donee']" && "input[name*='card']")

Meskipun saya tidak yakin seberapa optimal itu.

FDussault
sumber