सवाल मैं jQuery में एकाधिक कक्षाओं के साथ एक तत्व का चयन कैसे कर सकता हूं?


मैं उन सभी तत्वों का चयन करना चाहता हूं जिनमें दो वर्ग हैं a तथा b

<element class="a b">

तो, केवल तत्व हैं दोनों कक्षाएं।

जब मैं उपयोग करता हूं $(".a, .b") यह मुझे संघ देता है, लेकिन मुझे चौराहे चाहिए।


1774
2018-06-24 22:28


मूल


यह अच्छा होगा अगर आप परिभाषित कर सकें कि कौन सा संघ और चौराहे हमारे लिए नए हैं :) - Kolob Canyon
@ कोलोब कैन्यन यूनियन और चौराहे बुनियादी सेट सिद्धांत अवधारणाएं हैं। तो उदाहरण के लिए एक संघ सभी फ्रांसीसी वक्ताओं (पुरुषों और महिलाओं दोनों शामिल) होगा, जबकि एक चौराहे फ्रांसीसी बोलने वाली सभी महिलाएं होंगी (उन सभी को छोड़कर जो फ्रेंच नहीं बोलते हैं, और उन सभी लोगों को छोड़कर जो महिला नहीं हैं)। यूनियनों और चौराहे प्रत्येक सेट को परिभाषित करने वाली विशेषताओं की किसी भी संख्या के साथ किए जा सकते हैं। en.wikipedia.org/wiki/Union_(set_theory)  en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
मुझे लगता है कि आपका मतलब है कि "सेट" और "फ्रांसीसी-स्पीकर" दोनों सेटों में, संघ दुनिया की सभी महिलाएं और दुनिया के सभी फ्रांसीसी वक्ताओं, एक सेट जिसमें दोनों महिलाएं शामिल नहीं हैं फ्रेंच और फ्रेंच बोलने वाले पुरुष। चौराहे है, जैसा कि आपने लिखा था, केवल उन्हीं महिलाएं जो फ्रेंच बोलती हैं। - Teemu Leisti


जवाब:


यदि आप एक छेड़छाड़ चाहते हैं, तो चयनकर्ताओं को एक साथ लिखें जगह के बिना के बीच में।

$('.a.b')

तो एक तत्व के लिए जिसमें एक आईडी है a कक्षाओं के साथ b तथा c, आप लिखेंगे:

$('#a.b.c')

2293
2018-06-24 22:30



@ फ्लैटर: यह सिर्फ उदाहरण के लिए था। लेकिन कक्षाओं में यह उपयोगी हो सकता है b तथा cगतिशील रूप से जोड़े गए हैं, और यदि आप उन वर्गों में हैं तो आप केवल तत्व का चयन करना चाहते हैं। - Sasha Chedygov
आह, अच्छा बिंदु :-) अब तक मैं उपयोग करता था। HasClass () लेकिन यह एक बेहतर संकेत है। - Flater
चयन की यह विधि सीएसएस के लिए भी काम करती है उदा। .a.b {शैली गुण} देखें: css-tricks.com/multiple-class-id-selectors - Chris Halcrow
@ शिमी: हाँ। दो चयनकर्ताओं के बीच एक जगह का अर्थ है कि आप वंशजों की तलाश कर रहे हैं; अर्थात। .a .b कक्षा के साथ तत्वों की खोज b जो वर्ग के साथ तत्व के वंशज हैं a। तो कुछ पसंद है div a केवल वापस आ जाएगा a तत्व हैं जो हैं के भीतर ए div तत्व। - Sasha Chedygov
@ एएए: यह गलत है; यह jQuery की शुरुआत के बाद से इस तरह से किया गया है, क्योंकि इस तरह सीएसएस काम करता है। एक अल्पविराम उन तत्वों का चयन करता है जो चयनकर्ताओं से मेल खाते हैं (इसे तार्किक OR के रूप में सोचें), दोनों नहीं, इसलिए यह वही बात नहीं है (हालांकि मैं देख सकता हूं कि यह कैसे भ्रमित हो सकता है)। - Sasha Chedygov


आप इसका उपयोग कर कर सकते हैं filter() समारोह:

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

147
2018-06-24 22:34



इस उत्तर और स्वीकृत एक के बीच क्या अंतर है? - Daniel Allen Langdon
@ राइस: यह थोड़ा धीमा होगा, क्योंकि यह कक्षा "ए" के साथ वस्तुओं की एक सूची बनाएगा, फिर उन सभी को हटा दें जिनके पास कक्षा "बी" है, जबकि मेरा यह एक चरण में करता है। लेकिन अन्यथा, कोई फर्क नहीं पड़ता। - Sasha Chedygov
यह एक उदाहरण में मेरे लिए काम करता था जहां मैं एक चर के रूप में परिभाषित कक्षा की खोज कर रहा था, जो पहले उदाहरण में वाक्यविन्यास के साथ काम नहीं करता था। उदाहरण: $ ('। foo') फ़िल्टर (चर)। धन्यवाद - pac
@pac: $ ('foo' + variable) को चाल चलनी चाहिए थी, लेकिन मैं देख सकता हूं कि इस मामले में यह विधि स्पष्ट होगी। - Sasha Chedygov
यदि आप पहले ही पा चुके हैं तो यह भी अधिक कुशल है .aऔर मूल रूप से संबंधित विभिन्न मनमानी वर्गों के आधार पर कई बार फ़िल्टर करने की आवश्यकता है .a सेट। - Qix


मामले के लिए

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

आपको बीच में एक जगह लगाने की आवश्यकता होगी .a तथा .b.c

$('.a .b.c')

97
2018-03-25 20:31



आपके उत्तर में जोड़ना मैं जानना चाहता हूं कि यदि मामला नीचे है तो बी और सी दोनों का उपयोग कैसे करें: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? $ ('। A .b.c') के माध्यम से गलत परिणाम देता है। - Ipsita Rout
@IpsitaRout $('.a .b, .a .c') चाल करना चाहिए - Mr47
इस उदाहरण में, चयनकर्ता होगा $('.a .c.b') भी काम करते हो? - DanFromGermany


आपके पास जो समस्या है, वह यह है कि आप इसका उपयोग कर रहे हैं Group Selector, जबकि आप एक का उपयोग करना चाहिए Multiples selector! अधिक विशिष्ट होने के लिए, आप इसका उपयोग कर रहे हैं $('.a, .b') जबकि आप का उपयोग करना चाहिए $('.a.b')

अधिक जानकारी के लिए, यहां चयनकर्ताओं को गठबंधन करने के विभिन्न तरीकों का अवलोकन देखें!


समूह चयनकर्ता: ","

सभी का चयन करे <h1> तत्व और सब <p> तत्व और सब <a> तत्व:

$('h1, p, a')

गुणक चयनकर्ता: "" (कोई चरित्र नहीं)

सभी का चयन करे <input> के तत्व type  textकक्षाओं के साथ code तथा red :

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

Descendant चयनकर्ता: "" (अंतरिक्ष)

सभी का चयन करे <i> अंदर तत्व <p> तत्वों:

$('p i')

बाल चयनकर्ता: ">"

सभी का चयन करे <ul> तत्व जो तत्काल बच्चे हैं <li> तत्व:

$('li > ul')

निकट भाई चयनकर्ता: "+"

सभी का चयन करे <a> तत्व जो तुरंत बाद में रखा जाता है <h2> तत्वों:

$('h2 + a')

सामान्य भाई चयनकर्ता: "~"

सभी का चयन करे <span> तत्व जो भाई बहन हैं <div> तत्वों:

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





वेनिला जावास्क्रिप्ट समाधान: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02





तत्व के साथ बस एक और मामला का जिक्र करें:

जैसे <div id="title1" class="A B C">

बस टाइप करो: $("div#title1.A.B.C")


22
2017-12-14 16:15





बेहतर प्रदर्शन के लिए आप उपयोग कर सकते हैं

$('div.a.b')

यह आपके पृष्ठ पर मौजूद सभी HTML तत्वों के माध्यम से कदम उठाने के बजाय केवल div तत्वों के माध्यम से दिखाई देगा।


16
2017-09-28 05:26





समूह चयनकर्ता

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") 

6
2018-05-17 13:57





आपको जरूरत नहीं jQuery इसके लिए

में Vanilla तुम कर सकते हो :

document.querySelectorAll('.a.b')

1
2018-04-04 08:00