JQuery'de birden çok sınıf içeren bir öğeyi nasıl seçebilirim?

İki sınıf olan tüm unsurları seçmek istediğiniz ave b.

<element class="a b">

Yani, sadece her iki sınıfa da sahip olan unsurlar .

Kullandığımda $(".a, .b")bana birliği veriyor, ama kavşağı istiyorum.

Yalnızca her iki sınıftaki öğeleri (mantıksal AND gibi bir kavşak) eşleştirmek istiyorsanız , aralarında boşluk olmadan seçicileri birlikte yazın :

$('.a.b')

Sipariş alakalı değil, bu yüzden sınıfları da değiştirebilirsiniz:

$('.b.a')

Bir maç için Yani divbir kimliği vardır elemanı asınıflarıyla bve cşu yazılır:

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

(Uygulamada, büyük olasılıkla bu özelliğe ihtiyacınız yoktur ve genellikle bir kimlik veya sınıf seçici genellikle yeterlidir $('#a').)

Bu filter()işlevi kullanarak yapabilirsiniz :

$(".a").filter(".b")

Dava için

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

.aVe arasına boşluk bırakmanız gerekir..b.c

$('.a .b.c')

Sahip olduğunuz sorun, a kullanmanız Group Selector, oysa a Multiples selector! Daha açık olmak gerekirse, $('.a, .b')kullanmalısınız $('.a.b').

Daha fazla bilgi için, aşağıdaki seçicileri birleştirmenin farklı yollarına genel bakış konusuna bakın!

Grup Seçici: ","

Tüm <h1>öğeleri VE tüm <p>öğeleri VE tüm <a>öğeleri seçin:

$('h1, p, a')

Çoklu seçici: "" (karakter yok)

Sınıflarının ve <input>öğelerinin tüm öğelerini seçin :type textcodered

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

Torun Seçici: "" (boşluk)

<i>Öğelerin içindeki tüm öğeleri seçin <p>:

$('p i')

Çocuk Seçici: ">"

<ul>Bir <li>öğenin hemen alt öğesi olan tüm öğeleri seçin :

$('li > ul')

Bitişik Kardeş Seçici: "+"

<a>Öğelerden hemen sonra yerleştirilen tüm öğeleri seçin <h2>:

$('h2 + a')

Genel Kardeş Seçici: "~"

<span>Öğelerin kardeşleri olan tüm öğeleri seçin <div>:

$('div ~ span')

Sadece elementli başka bir durumdan bahsedin:

Örneğin <div id="title1" class="A B C">

Sadece yaz: $("div#title1.A.B.C")

Vanilya JavaScript çözümü: -

document.querySelectorAll('.a.b')

Daha iyi performans için kullanabilirsiniz

$('div.a.b')

Bu, sayfanızdaki tüm html öğelerine adım atmak yerine yalnızca div öğelerine bakacaktır.

Grup Seçici

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;}

Bu olur:

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

Yani sizin durumunuzda grup seçiciyi denediniz, oysa bir kavşak

$(".a, .b") 

bunun yerine bunu kullan

$(".a.b") 

Buna gerek yok jQuerybunun için

Gelen Vanillayapabileceğiniz:

document.querySelectorAll('.a.b')

kodunuz $(".a, .b")birden fazla öğenin altında çalışacaktır (aynı anda)

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

Eğer <element class="a b">koma olmadan js kullanmak gibi her iki sınıfa da ve b'ye sahip öğe seçmek istiyorsanız

$('.a.b')

İstediğiniz şey için getElementsByClassName()yöntem kullanabilirsiniz .

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>

Bu da en hızlı çözüm. burada bununla ilgili bir kıyaslama görebilirsiniz .

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