मैं DIV के भीतर कक्षा के साथ आइटम का चयन कैसे कर सकता हूं?

142

मेरे पास निम्न HTML है:

<div id="mydiv">
  <div class="myclass"></div>
</div>

मैं एक चयनकर्ता का उपयोग करने में सक्षम होना चाहता हूं जो अंदर का चयन करता है div, लेकिन mydivकंटेनर के लिए विशिष्ट है । मैं इसे jQuery के साथ कैसे प्राप्त कर सकता हूं?

— इदं शचर
स्रोत

285

प्रयत्न:

$('#mydiv').find('.myclass');

जेएस फिडेल डेमो ।

या:

$('.myclass','#mydiv');

जेएस फिडेल डेमो ।

या:

$('#mydiv .myclass');

जेएस फिडेल डेमो ।

संदर्भ:

find()।
चयनकर्ता प्रसंग ।

find()प्रलेखन से सीखने के लिए अच्छा है :

Thefind () और .children () विधियाँ समान हैं, सिवाय इसके कि बाद वाला केवल DOM ट्री के नीचे एक एकल स्तर की यात्रा करता है।

— डेविड कहते हैं कि मोनिका को बहाल करें
स्रोत

2

दूसरा दो एक काम नहीं करेगा, लेकिन ठीक है। दूसरा दो एक हर वर्ग = myclass का चयन करेगा और हर id = mydiv का चयन करेगा) मुझे लगता है।

— czupe

2

@czupe: नहीं, जबकि संदर्भ-चयनकर्ता दृष्टिकोण को अलग-अलग jQuery के औजार लिखा जाता है, आंतरिक रूप से, समान $('#mydiv').find('.myclass');दृष्टिकोण जो पहले कोड स्निपेट में उपयोग किया जाता है। संयोग से: '... हर चुनें id=mydiv'? वहाँ केवल चाहिए कभी किसी दिए गए में से एक इस्तेमाल किया जा idएक पेज में (एक id चाहिए दस्तावेज़ के भीतर अद्वितीय होना )।

— डेविड का कहना है कि मोनिका

@DavidThomas खैर मैंने सिर्फ $ ('# mydiv .myclass') की कोशिश की; और जो सभी divs का चयन करता है, जिसमें mydiv के भीतर सिर्फ div के बजाय वर्ग myclass है।

— user3281466

@ user3281466: वास्तव में? यह संभव नहीं लगता है, क्या आप अपनी समस्या को पुन: पेश कर सकते हैं ?

— डेविड का कहना है कि मोनिका

आप कैसे div में कुछ के लिए जाँच करते हैं और फिर इसे इसमें डालते हैं: नहीं ()

— SuperUberDuper

20

इसे इस्तेमाल करे

$("#mydiv div.myclass")

— ShankarSangoli
स्रोत

या अगर आपको परवाह नहीं है कि क्या यह div(या यदि यह हमेशा रहेगा div) तो आप $ ("# mydiv .myclass") को सरल बना सकते हैं।

— माइकल माइर

@ मिचेल - हां, हम सिर्फ .mycalss कह सकते हैं, लेकिन अगर हम इसके डिव को जानते हैं, तो div.myclass तेजी से खोज करेगा।

— शंकरसंगोली 21

@ शंकर, यह शायद इसे तेजी से नहीं बल्कि धीमी बना देगा। यह मानते हुए कि jquery sizzle का उपयोग करता है, न कि देशी का, document.queryselectorallयह शायद उसी अंदाज़ में खोजेगा और आपके मामले में एक अतिरिक्त जाँच करेगा। संभव है कि देशी कार्यान्वयन भी ऐसा ही करते हों।

— डेविएन

मेरे द्वारा चलाए गए कुछ त्वरित परीक्षण बताते हैं कि यह ब्राउज़र पर निर्भर है। यह क्रोम में थोड़ी तेजी से दिखाई दिया और FF में थोड़ा धीमा। किसी भी तरह से, जब तक आप इस चयनकर्ता को कई बार या बड़ी संख्या में तत्वों को नहीं चला रहे हैं, तब तक अंतर शायद नगण्य है। मेरे कच्चे (और संभवतः त्रुटिपूर्ण) परीक्षण के लिए यहां देखें ।

— माइकल मोइर

@ मिकेल - यदि हम वर्ग नाम के साथ-साथ टैग्नैम को भी निर्दिष्ट करते हैं, तो यह पहले getElementsByTagName का उपयोग करेगा और फिर वर्ग नाम की तलाश करेगा जो निश्चित रूप से तेज़ है और अभी भी पहले स्तर की छँटाई करने के लिए देशी पद्धति का उपयोग कर रहा है। यदि चयन करने के लिए कई तत्व नहीं हैं, तो यह नगण्य है।

— शंकरसंगोली

11

आप इसे उसी तरह करेंगे जैसे आप एक सीएसएस चयनकर्ता को लागू करेंगे। इंस्टेंट के लिए आप कर सकते हैं

$("#mydiv > .myclass")

या

$("#mydiv .myclass")

आखिरी वाला myDiv के अंदर प्रत्येक myclass से मेल खाएगा, जिसमें myclass के अंदर myclass भी शामिल है।

— लिएंड्रो गैलप्युपी
स्रोत

6

यदि आप हर उस तत्व का चयन करना चाहते हैं जिसमें वर्ग विशेषता "मायक्लास" का उपयोग हो

$('#mydiv .myclass');

यदि आप केवल उन दिव्य तत्वों का चयन करना चाहते हैं जिनमें वर्ग विशेषता "मायक्लास" का उपयोग है

$("div#mydiv div.myclass");

अधिक जानकारी प्राप्त jQuery चयनकर्ताओं के बारे में इन उल्लेख लेख

— e11438
स्रोत

1

इसके बजाय यह प्रयास करें $(".video-divs.focused")। यदि आप वीडियो-डिव पर ध्यान केंद्रित कर रहे हैं, तो यह काम करता है।

— user3749775
स्रोत