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


İki sınıfa sahip olan tüm elemanları seçmek istiyorum a ve b.

<element class="a b">

Yani, sadece her ikisi de sınıflar.

Kullandigimda $(".a, .b") Bana sendikayı veriyor, ama kesişimi istiyorum.


1774
2018-06-24 22:28


Menşei


Eğer bizim için birleşme ve kesişme anlamına geldiğini tanımlayabilirseniz hoş olurdu. - Kolob Canyon
@KolobCanyon birliği ve kesişim temel set teorisi kavramlarıdır. Örneğin, bir sendika bütün Fransız konuşmacılar (hem erkekleri hem de kadınları içerir), oysaki bir kesişme, Fransızca konuşan tüm kadınlar olacaktır (Fransızca bilmeyen herkesi dışarda bırakacak ve kadın olmayan tüm insanları dışlayacak). Sendikalar ve kavşaklar, her seti tanımlayan herhangi bir sayıda karakteristik ile yapılabilir. en.wikipedia.org/wiki/Union_(set_theory)  en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
Bence iki kadýn "kadýn" ve "Fransýzca konuşanlar" demek istiyorsun, sendika dünyadaki bütün kadýnlar ve tüm dünyadaki Fransýzca konuşanlar, her iki kadýnýn da konuþmamasýný da içeren bir set olacak. Fransızca ve Fransızca konuşan adamlar. Kesişim, yazdıkça, sadece Fransızca konuşan kadınlar. - Teemu Leisti


Cevaplar:


Bir kesişme yapmak istiyorsanız, seçicileri birlikte yazmanız yeterlidir. boşluksuz arasında.

$('.a.b')

Yani bir kimliği olan bir öğe için a sınıfları ile b ve csen yazarsın:

$('#a.b.c')

2293
2018-06-24 22:30



@Flater: Sadece örnek uğruna oldu. Ancak sınıflar yararlı olabilir b ve cdinamik olarak eklenir ve yalnızca bu sınıfları varsa öğeyi seçmek istersiniz. - Sasha Chedygov
Aha, iyi nokta :-) Şimdiye kadar kullanacağım .hasClass () ama bu daha iyi bir gösterim. - Flater
Bu seçim yöntemi ayrıca CSS için de geçerlidir. .a.b {style özellikleri} see: css-tricks.com/multiple-class-id-selectors - Chris Halcrow
@Shimmy: Evet. İki seçmen arasındaki bir alan, torunları araştırmak demektir; diğer bir deyişle .a .b sınıf öğelerini arar b sınıfla birlikte bir elementin torunları a. Yani bir şey gibi div a sadece geri dönecek a olan elemanlar içeride bir div öğesi. - Sasha Chedygov
@AaA: Bu yanlış; jQuery'nin başlangıcından beri bu şekilde oldu, çünkü CSS bu şekilde çalışıyor. Bir virgül, seçicilerinden herhangi biri ile eşleşen öğeleri (mantıksal bir OR olarak düşünür) seçer, her ikiside değil, yani aynı şey değil (bunun nasıl kafa karıştırıcı olabileceğini görebiliyorum). - Sasha Chedygov


Bunu kullanarak yapabilirsiniz filter() fonksiyon:

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

147
2018-06-24 22:34



Bu cevap ile kabul edilen arasındaki fark nedir? - Daniel Allen Langdon
@Rice: Bu biraz daha yavaş olacaktır, çünkü ilk önce "a" sınıfı olan nesnelerin bir listesini oluşturacak, sonra "b" sınıfına sahip olanların tümünü kaldıracaktır, oysa benimki bunu bir adımda yapar. Ama aksi halde, fark yok. - Sasha Chedygov
Bu, ilk örnekte sözdizimi ile çalışmayan bir değişken olarak tanımlanan bir sınıfı aradığım bir örnekte benim için çalıştı. örneğin: $ ('. foo'). filter (değişken). Teşekkürler - pac
@pac: $ ('. foo' + variable) hile yapmış olmalıydı, ancak bu durumda bu yöntemin nerede daha net olacağını görebiliyorum. - Sasha Chedygov
Bu zaten bulduysanız, daha verimli .aAynı zamanda orijinaline ait olan farklı keyfi sınıflara dayalı birden çok kez süzme ihtiyacı .a ayarlayın. - Qix


Dava için

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

Arada bir boşluk koymanız gerekecek .a ve .b.c

$('.a .b.c')

97
2018-03-25 20:31



Cevabınıza eklediğinizde, eğer durum aşağıdaki gibi ise hem b hem de c'ye nasıl erişileceğini bilmek istiyorum: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? $ ('. A. B.') İle yanlış sonuç verir. - Ipsita Rout
@IpsitaRout $('.a .b, .a .c') hile yapmalı - Mr47
Bu örnekte, seçici $('.a .c.b') ayrıca çalışır? - DanFromGermany


Yaşadığınız problem, bir Group Selector, sen bir Multiples selector! Daha spesifik olmak için, kullanıyorsunuz $('.a, .b') sen kullanıyor olmalısın $('.a.b').

Daha fazla bilgi için, seçiciyi birleştirmenin farklı yollarına genel bakış kısmına bakın!


Grup Seçici: ","

Hepsini seç <h1> elemanlar ve hepsi <p> elemanlar ve hepsi <a> elementler :

$('h1, p, a')

Çoğaltıcı seçicisi: "" (karakter yok)

Hepsini seç <input> unsurları type  textsınıfları ile code ve red :

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

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

Hepsini seç <i> içindeki elemanlar <p> elementler:

$('p i')

Çocuk Seçici: ">"

Hepsini seç <ul> hemen bir çocuğu olan unsurlar <li> öğe:

$('li > ul')

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

Hepsini seç <a> hemen sonra yerleştirilen öğeler <h2> elementler:

$('h2 + a')

Genel Kardeş Seçici: "~"

Hepsini seç <span> kardeşleri olan elemanlar <div> elementler:

$('div ~ span')

45
2018-01-20 22:24





$('.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>


30
2018-04-19 07:19





Vanilya JavaScript çözümü: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02





Sadece elemanla başka bir durumdan söz et:

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

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


22
2017-12-14 16:15





Daha iyi performans için kullanabilirsiniz

$('div.a.b')

Bu, sayfanızda bulunan tüm html öğelerine adım atmak yerine yalnızca div öğeleriyle görünecektir.


16
2017-09-28 05:26





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, onun bir kavşağı

$(".a, .b") 

bunun yerine kullan

$(".a.b") 

6
2018-05-17 13:57





İhtiyacın yok jQuery bunun için

İçinde Vanilla yapabilirsin :

document.querySelectorAll('.a.b')

1
2018-04-04 08:00