ฉันจะเลือกองค์ประกอบที่มีหลายคลาสใน jQuery ได้อย่างไร

2060

ฉันต้องการที่จะเลือกองค์ประกอบทั้งหมดที่มีสองชั้นและab

<element class="a b">

ดังนั้นเฉพาะองค์ประกอบที่มีทั้งชั้นเรียน

เมื่อฉันใช้$(".a, .b")มันทำให้ฉันมีสหภาพ แต่ฉันต้องการแยก

jquery jquery-selectors

— Mladen
แหล่งที่มา

2

มันจะดีหากคุณสามารถกำหนดสิ่งที่ยูเนี่ยนและสี่แยกหมายสำหรับเรา newbs :)

— Kolob แคนยอน

10

@KolobCanyon union and intersection เป็นแนวคิดทฤษฎีเซตพื้นฐาน ตัวอย่างเช่นสหภาพจะเป็นผู้พูดภาษาฝรั่งเศสทั้งหมด (รวมทั้งชายและหญิง) ในขณะที่การแยกจะเป็นผู้หญิงทุกคนที่พูดภาษาฝรั่งเศส (ยกเว้นทุกคนที่ไม่พูดภาษาฝรั่งเศสและแยกคนที่ไม่ใช่ผู้หญิง) สหภาพแรงงานและทางแยกสามารถทำกับจำนวนของคุณสมบัติที่กำหนดในแต่ละชุด en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

— Katharine Osborne

6

ฉันคิดว่าคุณหมายถึงว่า "ผู้หญิง" และ "ผู้พูดภาษาฝรั่งเศส" ทั้งสองชุดสหภาพจะเป็นผู้หญิงทุกคนในโลกและผู้พูดภาษาฝรั่งเศสทั้งหมดในโลกชุดที่รวมถึงผู้หญิงทั้งสองที่ไม่พูด ผู้ชายที่พูดภาษาฝรั่งเศสและฝรั่งเศส จุดตัดคือตามที่คุณเขียนเฉพาะผู้หญิงที่พูดภาษาฝรั่งเศส

— Teemu Leisti

2626

ถ้าคุณต้องการจับคู่อิลิเมนต์ที่มีทั้งคลาส (จุดตัดเช่นตรรกะ AND) เพียงเขียนตัวเลือกร่วมกันโดยไม่มีช่องว่างระหว่าง:

$('.a.b')

คำสั่งซื้อไม่เกี่ยวข้องดังนั้นคุณสามารถสลับคลาสได้:

$('.b.a')

ดังนั้นเพื่อให้ตรงกับdivองค์ประกอบที่มี ID ของaกับชั้นเรียนbและcคุณจะเขียน:

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

(ในทางปฏิบัติคุณอาจไม่จำเป็นต้องได้รับเฉพาะเจาะจงและ ID หรือตัวเลือกชั้นเรียนด้วยตัวเองก็เพียงพอแล้ว: $('#a').)

— Sasha Chedygov
แหล่งที่มา

9

@ Flater: มันเป็นเพียงตัวอย่างเท่านั้น แต่มันอาจมีประโยชน์หากคลาสbและcมีการเพิ่มแบบไดนามิกและคุณต้องการเลือกองค์ประกอบหากมันมีคลาสเหล่านั้น

— Sasha Chedygov

3

อ๊ะประเด็นดี :-) จนถึงตอนนี้ฉันจะใช้. hasClass () แต่นี่เป็นวิธีที่ดีกว่า

— Flater

4

วิธีการเลือกนี้ใช้ได้กับ CSS เช่น. ab {style properties} โปรดดู: css-tricks.com/multiple-class-id-selectors

— Chris Halcrow

30

@Shimmy: ใช่ ช่องว่างระหว่างตัวเลือกสองตัวหมายความว่าคุณกำลังค้นหาผู้สืบทอด คือ.a .bการค้นหาสำหรับองค์ประกอบที่มีระดับที่เป็นลูกหลานขององค์ประกอบที่มีคลาสb aดังนั้นสิ่งที่ต้องการdiv aจะกลับaองค์ประกอบที่มีอยู่ภายในdivองค์ประกอบ

— Sasha Chedygov

2

@AaA: ไม่ถูกต้อง; มันเป็นแบบนี้มาตั้งแต่ต้น jQuery เพราะนั่นคือวิธีการทำงานของ CSS เครื่องหมายจุลภาคเลือกองค์ประกอบที่ตรงกับตัวเลือกอย่างใดอย่างหนึ่ง (คิดว่าเป็นตรรกะ OR) ไม่ใช่ทั้งสองอย่างดังนั้นจึงไม่ใช่สิ่งเดียวกัน (แม้ว่าฉันจะเห็นว่ามันอาจทำให้สับสน)

— Sasha Chedygov

174

คุณสามารถทำได้โดยใช้filter()ฟังก์ชั่น:

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

— เจมี่เลิฟ
แหล่งที่มา

16

ความแตกต่างระหว่างคำตอบนี้กับคำตอบที่ยอมรับคืออะไร?

— Vivian River

49

@ ข้าว: อันนี้จะช้ากว่านิดหน่อยเพราะมันจะสร้างรายการของวัตถุที่มีคลาส "a" ก่อนจากนั้นจึงลบทั้งหมดยกเว้นวัตถุที่มีคลาส "b" ในขณะที่ฉันทำสิ่งนี้ในขั้นตอนเดียว แต่อย่างอื่นไม่มีความแตกต่าง

— Sasha Chedygov

5

สิ่งนี้ใช้ได้กับฉันในกรณีที่ฉันค้นหาคลาสที่กำหนดเป็นตัวแปรซึ่งไม่ได้ทำงานกับไวยากรณ์ในตัวอย่างแรก เช่น: $ ('. foo'). ตัวกรอง (ตัวแปร) ขอบคุณ

— pac

7

@pac: $ ('. foo' + ตัวแปร) ควรทำเคล็ดลับ แต่ฉันสามารถดูว่าวิธีนี้จะชัดเจนในกรณีนี้

— Sasha Chedygov

6

นอกจากนี้ยังมีประสิทธิภาพมากขึ้นหากคุณพบแล้ว.aและต้องการกรองคลาสตามอำเภอใจที่แตกต่างกันหลายครั้งซึ่งเป็นของ.aชุดเดิม

— Qix - MONICA ได้รับการยกเว้นเมื่อ

123

สำหรับกรณี

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

คุณจะต้องใส่ช่องว่างระหว่าง.aและ.b.c

$('.a .b.c')

— juanpaulo
แหล่งที่มา

การเพิ่มคำตอบของคุณฉันต้องการทราบวิธีเข้าถึงทั้ง b และ c หากกรณีเป็นดังนี้: <element class = "a"> <element class = "b"> </element> <องค์ประกอบ class = "c" > </element> </element>? ผ่าน $ ('. a .b.c') จะให้ผลที่ผิด

— Ipsita Rout

ในตัวอย่างนี้ตัวเลือกจะ$('.a .c.b')ทำงานด้วยหรือไม่

— Daniel W.

ใช่ตามคำสั่งไม่สำคัญ

— Zim84

$('.a > element')

— อเล็กซ์

63

ปัญหาที่คุณมีคือคุณกำลังใช้ a Group Selectorในขณะที่คุณควรใช้ a Multiples selector! การจะมีความเฉพาะเจาะจงมากขึ้นคุณใช้ในขณะที่คุณควรจะใช้$('.a, .b')$('.a.b')

สำหรับข้อมูลเพิ่มเติมดูภาพรวมของวิธีต่างๆในการรวมตัวเลือกไว้ด้านล่าง!

ตัวเลือกกลุ่ม: ","

เลือก<h1>องค์ประกอบทั้งหมด<p>และ<a>องค์ประกอบทั้งหมดและองค์ประกอบทั้งหมด:

$('h1, p, a')

ตัวเลือกหลายรายการ: "" (ไม่มีอักขระ)

เลือก<input>องค์ประกอบทั้งหมดของtype textพร้อมคลาสcodeและred:

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

ตัวเลือกลูกหลาน: "" (ช่องว่าง)

เลือก<i>องค์ประกอบทั้งหมดภายใน<p>องค์ประกอบ:

$('p i')

ตัวเลือกลูก: ">"

เลือก<ul>องค์ประกอบทั้งหมดที่เป็นลูกของ<li>องค์ประกอบทันที:

$('li > ul')

ตัวเลือกพี่น้องที่อยู่ติดกัน: "+"

เลือก<a>องค์ประกอบทั้งหมดที่วางไว้ทันทีหลังจาก<h2>องค์ประกอบ:

$('h2 + a')

ตัวเลือกพี่น้องทั่วไป: "~"

เลือก<span>องค์ประกอบทั้งหมดที่เป็นพี่น้องของ<div>องค์ประกอบ:

$('div ~ span')

— John Slegers
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— user2298171
แหล่งที่มา

26

เพียงพูดถึงกรณีอื่นที่มีองค์ประกอบ:

เช่น <div id="title1" class="A B C">

เพียงพิมพ์: $("div#title1.A.B.C")

— macio.Jun
แหล่งที่มา

26

วิธีการแก้ปัญหาวานิลลา JavaScript: -

document.querySelectorAll('.a.b')

— Salman von Abbas
แหล่งที่มา

20

เพื่อประสิทธิภาพที่ดีขึ้นคุณสามารถใช้

$('div.a.b')

สิ่งนี้จะมองผ่านองค์ประกอบ div แทนที่จะดูองค์ประกอบ HTML ทั้งหมดที่คุณมีในหน้าเว็บของคุณ

— Tejas Shah
แหล่งที่มา

9

ตัวเลือกกลุ่ม

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

กลายเป็นสิ่งนี้:

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

ดังนั้นในกรณีของคุณคุณได้ลองเลือกกลุ่มในขณะที่มันแยก

$(".a, .b")

ใช้สิ่งนี้แทน

$(".a.b")

— Surya R Praveen
แหล่งที่มา

4

คุณไม่ต้องการjQueryสิ่งนี้

ในVanillaสิ่งที่คุณสามารถทำได้:

document.querySelectorAll('.a.b')

— Sandwell
แหล่งที่มา

จริงในปี 2018 แต่ไม่ได้ถามคำถามนี้เมื่อถามในปี 2009

— Michiel

3

รหัสของคุณ$(".a, .b")จะใช้ได้กับองค์ประกอบหลายรายการด้านล่าง

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

ถ้าคุณต้องการเลือกองค์ประกอบที่มี a และ b ทั้งคลาสเหมือน<element class="a b">ใช้ js โดยไม่มีอาการโคม่า

$('.a.b')

— สะหวัน
แหล่งที่มา

2

คุณสามารถใช้getElementsByClassName()วิธีการสำหรับสิ่งที่คุณต้องการ

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>

ขยายตัวอย่างข้อมูล

นี่คือทางออกที่เร็วที่สุดเช่นกัน คุณสามารถดูมาตรฐานเกี่ยวกับที่นี่

— bahman parsamanesh
แหล่งที่มา

1

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

— Karim Ali
แหล่งที่มา