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?

— 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

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