Bagaimana saya bisa memilih elemen dengan beberapa kelas di jQuery?

2062

Saya ingin memilih semua elemen yang memiliki dua kelas adan b.

<element class="a b">

Jadi, hanya elemen yang memiliki kedua kelas.

Ketika saya menggunakannya $(".a, .b")memberi saya persatuan, tetapi saya ingin persimpangan.

jquery jquery-selectors Mladen
sumber
2
Alangkah baiknya jika Anda bisa mendefinisikan apa arti persatuan dan persimpangan bagi kami yang baru :)
Kolob Canyon
10
@KolobCanyon union dan persimpangan adalah konsep teori himpunan dasar. Jadi misalnya persatuan akan menjadi semua penutur bahasa Prancis (termasuk pria dan wanita), sedangkan persimpangan adalah semua wanita yang berbicara bahasa Prancis (mengecualikan semua orang yang tidak berbicara bahasa Prancis, dan mengecualikan semua orang yang bukan wanita). Serikat pekerja dan persimpangan dapat dibuat dengan sejumlah karakteristik yang menentukan setiap set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Katharine Osborne
6
Saya pikir maksud Anda dari dua set "wanita" dan "penutur bahasa Prancis", persatuan adalah semua wanita di dunia dan semua penutur bahasa Prancis di dunia, satu set yang mencakup kedua wanita yang tidak berbicara Pria berbahasa Perancis dan Perancis. Persimpangan, seperti yang Anda tulis, hanya wanita-wanita yang berbicara bahasa Prancis.
Teemu Leisti

Jawaban:

2628

Jika Anda ingin mencocokkan hanya elemen dengan kedua kelas (persimpangan, seperti logika AND), cukup tulis selektor bersama - sama tanpa spasi di antaranya:

$('.a.b')

Pesanan tidak relevan, jadi Anda juga dapat menukar kelas:

$('.b.a')

Jadi, untuk mencocokkan divelemen yang memiliki ID adengan kelas bdan c, Anda akan menulis:

$('div#a.b.c')

(Dalam praktiknya, Anda kemungkinan besar tidak perlu mendapatkan yang spesifik, dan ID atau pemilih kelas dengan sendirinya biasanya cukup:. $('#a'))

Sasha Chedygov
sumber
9
@Flater: Itu hanya untuk contoh saja. Tetapi mungkin berguna jika kelas bdan cditambahkan secara dinamis, dan Anda hanya ingin memilih elemen jika memiliki kelas tersebut.
Sasha Chedygov
3
Aha, poin bagus :-) Sampai sekarang saya akan menggunakan .hasClass () tapi ini adalah notasi cara yang lebih baik.
Flater
4
Metode pemilihan ini juga berfungsi untuk CSS misalnya .ab {style properties} lihat: css-tricks.com/multiple-class-id-selectors
Chris Halcrow
30
@ Kimmy: Ya. Sebuah ruang antara dua penyeleksi berarti Anda sedang mencari keturunan; yaitu .a .bmencari elemen dengan kelas byang merupakan turunan dari elemen dengan kelas a. Jadi sesuatu seperti div ahanya akan mengembalikan aelemen yang ada di dalam divelemen.
Sasha Chedygov
2
@ AaA: Itu tidak benar; sudah seperti ini sejak awal jQuery, karena itulah cara kerja CSS. Koma memilih elemen yang cocok dengan salah satu pemilih (anggap saja sebagai logis ATAU), bukan keduanya, jadi itu bukan hal yang sama (meskipun saya bisa melihat bagaimana itu mungkin membingungkan).
Sasha Chedygov
174

Anda dapat melakukan ini menggunakan filter()fungsi:

$(".a").filter(".b")
Jamie Love
sumber
16
Apa perbedaan antara jawaban ini dan jawaban yang diterima?
Sungai Vivian
49
@Rice: Yang ini akan sedikit lebih lambat, karena ia akan membangun daftar objek dengan kelas "a" terlebih dahulu, kemudian hapus semua kecuali yang memiliki kelas "b", sedangkan saya melakukan ini dalam satu langkah. Tetapi sebaliknya, tidak ada perbedaan.
Sasha Chedygov
5
Ini berfungsi untuk saya dalam contoh di mana saya sedang mencari kelas yang didefinisikan sebagai variabel, yang tidak bekerja dengan sintaks pada contoh pertama. misal: $ ('. foo'). filter (variabel). Terima kasih
pac
7
@ pac: $ ('. foo' + variabel) seharusnya melakukan trik, tapi saya bisa melihat di mana metode ini akan lebih jelas dalam kasus itu.
Sasha Chedygov
6
Ini juga lebih efisien jika Anda telah menemukan .adan perlu menyaring beberapa kali berdasarkan kelas arbitrer yang berbeda yang juga milik .aset asli .
Qix - MONICA DISEBUTKAN
123

Untuk kasus ini

<element class="a">
  <element class="b c">
  </element>
</element>

Anda harus menempatkan spasi di antara .adan.b.c

$('.a .b.c')
juanpaulo
sumber
Menambah jawaban Anda, saya ingin tahu cara mengakses b dan c jika kasusnya seperti di bawah ini: <elemen class = "a"> <elemen class = "b"> </element> <elemen class = "c" > </element> </element>? Melalui $ ('. A .b.c') memberikan hasil yang salah.
Ipsita Rout
Dalam contoh ini, apakah pemilih $('.a .c.b')juga akan berfungsi?
Daniel W.
Ya, karena pesanannya tidak masalah.
Zim84
$('.a > element')
Alex
63

Masalah yang Anda hadapi, adalah bahwa Anda menggunakan Group Selector, sedangkan Anda harus menggunakan Multiples selector! Untuk lebih spesifik, Anda menggunakan $('.a, .b')sedangkan Anda harus menggunakan $('.a.b').

Untuk informasi lebih lanjut, lihat ikhtisar tentang berbagai cara untuk menggabungkan penyeleksi di sini!

Pemilih Grup: ","

Pilih semua <h1>elemen DAN semua <p>elemen DAN semua <a>elemen:

$('h1, p, a')

Pemilih berganda: "" (tanpa karakter)

Pilih semua <input>elemen type text, dengan kelas codedan red:

$('input[type="text"].code.red')

Pemilih Keturunan: "" (spasi)

Pilih semua <i>elemen di dalam <p>elemen:

$('p i')

Pemilih Anak: ">"

Pilih semua <ul>elemen yang merupakan anak langsung dari suatu <li>elemen:

$('li > ul')

Selector Adjacent Adjacent: "+"

Pilih semua <a>elemen yang ditempatkan segera setelah <h2>elemen:

$('h2 + a')

Pemilih Sibling Umum: "~"

Pilih semua <span>elemen yang merupakan saudara <div>elemen:

$('div ~ span')
John Slegers
sumber
38 

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>
Luaskan cuplikan

pengguna2298171
sumber
26

Sebut saja kasus lain dengan elemen:

Misalnya <div id="title1" class="A B C">

Ketik saja: $("div#title1.A.B.C")

macio.Jun
sumber
26

Solusi JavaScript vanila: -

document.querySelectorAll('.a.b')

Salman von Abbas
sumber
20

Untuk kinerja yang lebih baik, Anda dapat menggunakan

$('div.a.b')

Ini akan melihat hanya melalui elemen div alih-alih melangkah melalui semua elemen html yang Anda miliki di halaman Anda.

Tejas Shah
sumber
9

Pemilih Grup

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Menjadi ini:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Jadi, dalam kasus Anda, Anda telah mencoba pemilih grup sedangkan persimpangannya

$(".a, .b")

alih-alih gunakan ini

$(".a.b")
Surya R Praveen
sumber
4

Anda tidak perlu jQueryuntuk ini

Di dalam Vanillakamu dapat melakukan:

document.querySelectorAll('.a.b')
Sandwell
sumber
Benar pada tahun 2018, tetapi tidak pada saat pertanyaan ini diajukan pada tahun 2009
Michiel
3

kode Anda $(".a, .b")akan berfungsi untuk beberapa elemen di bawah ini (pada saat yang sama)

<element class="a">
<element class="b">

jika Anda ingin memilih elemen yang memiliki a dan b kedua kelas seperti <element class="a b">daripada menggunakan js tanpa koma

$('.a.b')
Savan
sumber
2

Anda dapat menggunakan getElementsByClassName()metode untuk apa yang Anda inginkan.

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);
<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>
Luaskan cuplikan

Ini adalah solusi tercepat juga. Anda dapat melihat patokan tentang itu di sini .

bahman parsamanesh
sumber
1

var elem = document.querySelector (". ab");

Karim Ali
sumber