jQuery pilih berdasarkan atribut menggunakan operator AND dan OR

105

Saya sedang memikirkan, apakah mungkin di jQuery untuk memilih elemen dengan atribut bernama menggunakan AND dan OR.

Contoh:

<div myid="1" myc="blue">1</div>
<div myid="2" myc="blue">2</div>
<div myid="3" myc="blue">3</div>
<div myid="4">4</div>

Saya ingin memilih semua elemen di mana myc="blue" tetapi hanya yang memiliki myidset ke 1 atau 3.

Jadi saya mencoba:

a=$('[myc="blue"] [myid="1"]  [myid="3"]');

tapi tidak berhasil, sama di sini:

a=$('[myc="blue"] && [myid="1"] || [myid="3"]');

Apakah mungkin tanpa menulis fungsi filter khusus?

jquery jquery-selectors find operators Bndr
sumber
7
NB: Anda tidak boleh membuat atribut seperti mycdan myid. Jika Anda menggunakan awalan HTML5 dengan data-: data-mycdan data-myid.
RoToRa
@RoToRa, apakah ada dokumentasi dalam HTML5 yang mengatakan bahwa Anda harus melakukannya? Sebagian besar situs web yang saya lihat menggunakan apa pun yang dipikirkan otak pengembang saat itu ...
Alexis Wilke
1
Hanya karena orang melakukannya, bukan berarti itu benar. Lihat HTML5 Bagian 3.2.1 : "Penulis tidak boleh menggunakan elemen, atribut, atau nilai atribut yang tidak diizinkan oleh spesifikasi ini atau spesifikasi lain yang berlaku, karena hal itu akan mempersulit pengembangan bahasa di masa mendatang."
RoToRa
1
Ini adalah contoh yang buruk dari pertanyaan yang bagus. Bagaimana dengan tipe elemen yang berbeda seperti input?
yesus g_force Harris

Jawaban:

193

DAN operasi

a=$('[myc="blue"][myid="1"][myid="3"]');

ATAU operasi, gunakan koma

a=$('[myc="blue"],[myid="1"],[myid="3"]');

Seperti komentar @Vega:

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Gabe
sumber
1
Saya pikir, dia menginginkanmyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
2
jika saya menggunakan a=$('[myc="blue"] [myid="1"],[myid="3"]');artinya ([myc="blue"] AND [myid="1"]) OR [myid="3"]atau ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) saya mencari yang kedua // Edit: terima kasih untuk pembaruan itu! :-)
The Bndr
18

Penggunaan sederhana .filter() [dokumen] (DAN) menggunakan beberapa pemilih [dokumen] (ATAU):

$('[myc="blue"]').filter('[myid="1"],[myid="2"]');

Secara umum, selektor rangkaian, seperti a.foo.bar[attr=value]adalah semacam pemilih DAN.

jQuery memiliki dokumentasi ekstensif tentang penyeleksi yang didukung, itu layak untuk dibaca.

Felix Kling
sumber
tahukah anda, apakah ini lebih cepat dari jawaban dari gabe?
The Bndr
Saya tidak tahu, mungkin, mungkin tidak.
Felix Kling
10

Bagaimana kalau menulis filter seperti di bawah ini,

$('[myc="blue"]').filter(function () {
   return (this.id == '1' || this.id == '3');
});

Edit: @Jack Terima kasih .. benar-benar melewatkannya ..

$('[myc="blue"]').filter(function() {
   var myId = $(this).attr('myid');   
   return (myId == '1' || myId == '3');
});

DEMO

Selvakumar Arumugam
sumber
5

Operator and dalam selektor hanyalah string kosong, dan operator or berupa koma.

Namun tidak ada pengelompokan atau prioritas, jadi Anda harus mengulangi salah satu ketentuan:

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
Guffa
sumber
apakah Anda membutuhkan kutipan itu? Maksud saya hanya untuk konsistensi .. mungkin hanya saya. >. <
Selvakumar Arumugam
1
@Vega: Anda tidak memerlukan tanda kutip untuk string sederhana seperti blue, tetapi saya tidak yakin tentang nilai numerik, jadi saya menyimpannya.
Guffa
5

Pertama temukan kondisi yang terjadi di semua situasi, lalu filter kondisi khusus:

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');
Mendongkrak
sumber
1

Dalam kasus khusus Anda, itu akan terjadi 

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Paul
sumber
0

JQuery menggunakan pemilih CSS untuk memilih elemen, jadi Anda hanya perlu menggunakan lebih dari satu aturan dengan memisahkannya dengan koma, sebagai berikut:

a=$('[myc="blue"], [myid="1"], [myid="3"]');

Edit:

Maaf, Anda mau biru dan 1 atau 3. Bagaimana kalau:

a=$('[myc="blue"][myid="1"],  [myid="3"]');

Menyatukan dua selektor atribut memberi Anda DAN, menggunakan koma memberi Anda ATAU.

philnash
sumber
1
Saya pikir, dia menginginkanmyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
Anda perlu mengulang [myc="blue"]selektor pada contoh kedua.
RoToRa
-1

Untuk benar memilih elemen menggunakan operasi logis bahwa Anda telah menyatakan, Anda hanya perlu jQuery.filter()untuk ANDoperasi, bukan "fungsi filter khusus". Anda juga perlu jQuery.add()untuk ORoperasi tersebut.

var elements = $('[myc="blue"]').filter('[myid="1"').add('[myid="3"');

Atau, dimungkinkan untuk menggunakan singkatan dalam satu selektor, di mana selektor jamming bersama-sama bertindak sebagai ANDdan memisahkan dengan koma bertindak sebagai OR:

var elements = $('[myc="blue"][myid="1"], [myid="3"]');
mVChr
sumber