मैं jQuery में कई वर्गों के साथ एक तत्व का चयन कैसे कर सकता हूं?

Question

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

<element class="a b">

तो, केवल उन तत्वों को जिनके पास दोनों वर्ग हैं।

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

Comments

यह अच्छा होगा यदि आप परिभाषित कर सकते हैं कि संघ और चौराहे का हमारे लिए क्या अर्थ है :)

— कोलोब कैनियन

@KolobCanyon संघ और चौराहे बुनियादी सेट सिद्धांत अवधारणाएं हैं। इसलिए उदाहरण के लिए एक संघ सभी फ्रांसीसी वक्ता होंगे (जिनमें पुरुष और महिलाएं दोनों शामिल हैं), जबकि एक चौराहा सभी महिलाएं होंगी जो फ्रेंच भाषा बोलती हैं (उन सभी को शामिल करती हैं जो फ्रांसीसी नहीं बोलते हैं, और उन सभी लोगों को शामिल करते हैं जो महिला नहीं हैं)। यूनियनों और चौराहों को प्रत्येक सेट को परिभाषित करने वाली किसी भी संख्या के साथ बनाया जा सकता है। en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

— काथरीन ओसबोर्न

मुझे लगता है कि आप का मतलब है कि दो सेट "महिला" और "फ्रेंच-बोलने वाले", संघ दुनिया की सभी महिलाएं और दुनिया के सभी फ्रेंच-स्पीकर होंगे, एक ऐसा सेट जिसमें दोनों महिलाएं शामिल हैं जो बोलते नहीं हैं फ्रेंच और फ्रेंच भाषी पुरुष। चौराहा है, जैसा कि आपने लिखा है, केवल उन महिलाओं को जो फ्रेंच बोलते हैं।

— तेमू लीस्तु

Answer 1

यदि आप दोनों वर्गों (एक प्रतिच्छेदन, जैसे तार्किक और) के साथ केवल तत्वों का मिलान करना चाहते हैं , तो चयनकर्ताओं को बिना रिक्त स्थान के एक साथ लिखें :

$('.a.b')

आदेश प्रासंगिक नहीं है, इसलिए आप कक्षाओं को स्वैप भी कर सकते हैं:

$('.b.a')

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

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

(व्यवहार में, आपको सबसे अधिक संभावना है कि विशिष्ट प्राप्त करने की आवश्यकता नहीं है, और एक आईडी या कक्षा चयनकर्ता आमतौर पर पर्याप्त है $('#a'))।

Comments

@ फैलेटर: यह सिर्फ उदाहरण के लिए था। लेकिन यह कक्षाएं अगर उपयोगी हो सकता है bऔर cगतिशील रूप से जोड़ रहे हैं, और आप केवल अगर यह उन वर्गों है तत्व का चयन करना चाहते हैं।

— साशा चेडोगो

अहा, अच्छी बात है :-) अब तक मैंने .hasClass () का उपयोग किया होगा, लेकिन यह एक तरह से बेहतर अंकन है।

— Flater

चयन का यह तरीका CSS के लिए भी काम करता है। उदाहरण के लिए .ab {स्टाइल प्रॉपर्टीज} देखें: css-tricks.com/multiple-class-id-selectors

— क्रिस

@ शमी: हाँ दो चयनकर्ताओं के बीच एक स्थान का मतलब है कि आप वंशज की खोज कर रहे हैं; अर्थात .a .bकक्षा वाले तत्वों की खोज करता है जो वर्ग के साथ bएक तत्व के वंशज हैं a। तो कुछ ऐसा div aहोगा जो केवल उन aतत्वों को वापस करेगा जो एक तत्व के अंदर हैं div।

— साशा चोडगोव

@AAA: यह गलत है; यह jQuery की शुरुआत के बाद से इस तरह से किया गया है, क्योंकि सीएसएस कैसे काम करता है। एक अल्पविराम उन तत्वों का चयन करता है जो या तो चयनकर्ताओं से मेल खाते हैं (इसे तार्किक के रूप में सोचें), दोनों नहीं, इसलिए यह एक ही बात नहीं है (हालांकि मैं देख सकता हूं कि यह कैसे भ्रमित हो सकता है)।

— साशा चोडगोव

Answer 2

आप filter()फ़ंक्शन का उपयोग करके ऐसा कर सकते हैं :

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

Comments

इस उत्तर और स्वीकृत एक के बीच क्या अंतर है?

— विवियन रिवर

@Rice: यह एक थोड़ा धीमा होगा, क्योंकि यह कक्षा "ए" के साथ वस्तुओं की एक सूची का निर्माण करेगा, फिर सभी को हटा दें लेकिन जिनके पास वर्ग "बी" है, जबकि मेरा यह एक कदम में है। लेकिन अन्यथा, कोई अंतर नहीं।

— साशा चेदिगोव

यह मेरे लिए एक उदाहरण में काम करता है जहां मैं एक चर के रूप में परिभाषित एक वर्ग की खोज कर रहा था, जो पहले उदाहरण में वाक्य रचना के साथ काम नहीं करता था। उदाहरण: $ ('। foo')। फ़िल्टर (चर)। धन्यवाद

— पीएसी

@pac: $ ('। foo' + वैरिएबल) को ट्रिक करना चाहिए था, लेकिन मैं देख सकता हूं कि उस स्थिति में यह विधि कहां तक ​​स्पष्ट होगी।

— साशा चोडगोव

यह भी अधिक कुशल है यदि आप पहले से ही पाया है .aऔर कई बार आधारित विभिन्न मनमानी वर्गों को फ़िल्टर करने की आवश्यकता है जो मूल .aसेट से संबंधित हैं ।

— Qix - मोनासा ने

Answer 3

मामले के लिए

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

आपको बीच .a- बीच में जगह डालनी होगी.b.c

$('.a .b.c')

Comments

अपने उत्तर में जोड़कर मैं जानना चाहूंगा कि यदि मामला नीचे है तो b और c दोनों का उपयोग कैसे करें: <तत्व वर्ग = "a"> <तत्व वर्ग = "b"> </ तत्व> <तत्व वर्ग = "c" > </ तत्व> </ तत्व>? $ ('.B .b.c') के द्वारा गलत परिणाम देता है।

— इप्सिता राउत

इस उदाहरण में, क्या चयनकर्ता $('.a .c.b')भी काम करेगा?

— डैनियल डब्ल्यू।

हां, जैसा कि आदेश मायने नहीं रखता।

— Zim84

$('.a > element')

— एलेक्स

Answer 4

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

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

---

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

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

$('h1, p, a')

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

कक्षाओं के साथ सभी <input>तत्वों का चयन करें और :type textcodered

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

वंशज चयनकर्ता: "" (स्थान)

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

$('p i')

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

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

$('li > ul')

आसन्न सिबलिंग चयनकर्ता: "+"

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

$('h2 + a')

सामान्य सहोदर चयनकर्ता: "~"

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

$('div ~ span')

Answer 5

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

Answer 6

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

उदाहरण के लिए <div id="title1" class="A B C">

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

Answer 7

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

document.querySelectorAll('.a.b')

Answer 8

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

$('div.a.b')

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

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

Answer 10

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

में Vanillaआप कर सकते हैं:

document.querySelectorAll('.a.b')

Comments

२०१ was में सच है, लेकिन इस सवाल को नहीं पूछा गया था २०० ९ में

— माइकल

Answer 11

आपका कोड $(".a, .b")कई तत्वों (एक ही समय में) से नीचे काम करेगा

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

यदि आप <element class="a b">कोमा के बिना उपयोग करने की तुलना में ए और बी दोनों वर्ग वाले तत्व का चयन करना चाहते हैं

$('.a.b')

Answer 12

आप 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>

यह सबसे तेज उपाय भी है। आप यहाँ उस बारे में एक बेंचमार्क देख सकते हैं ।

Answer 13

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