2011-12-16 23 views
24

मैं jQuery के साथ निम्नलिखित <div> में पहले <p> तत्व का चयन कैसे करूं?jQuery चयनकर्ता के पहले jQuery?

$(yourDiv).find("p").eq(0); 

पहले p हमेशा div का एक सीधा बच्चा हो जाएगा, तो आप children बजाय find इस्तेमाल कर सकते हैं:

<div> 
    <h1>heading</h1> 
    <p>How do I select this element with jQuery?</p> 
    <p>Another paragraph</p> 
</div> 

उत्तर

52

आप यह मानते हुए पहले से ही div के लिए एक संदर्भ है।

कुछ विकल्प शामिल हैं:

$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method 
$(yourDiv).find("p:first"); 
$(yourDiv).find("p").first() //Just an alias for `.eq(0)` 

ध्यान दें कि eq विधि हमेशा यह करने के लिए सबसे तेज़ तरीका हो जाएगा।

enter image description here

+0

अच्छा बताते है, यह समझाने लग रहा है, धन्यवाद! –

+1

कोई समस्या नहीं, खुशी है कि मैं मदद कर सकता हूं :) यदि आप रुचि रखते हैं, तो एक और विकल्प होगा: lt (1) '। मुझे लगभग निश्चित है कि यह धीमा हो जाएगा कि '.qq' विधि भी है, लेकिन यह एक ही चीज़ को प्राप्त करने का एक और तरीका है। –

+0

वाह, यह एक महत्वपूर्ण अंतर है। मुझे समझ में नहीं आता क्यों jQuery अनुमति देगा: सबसे पहले।पृष्ठभूमि में, इसे परिवर्तित किया जाना चाहिए: nth-child (1)। http://jsperf.com/jq-first-vs-eq/3 क्या ऐसा कोई कारण नहीं है? – rkw

6
$('div p:first') 

जवाब भी था: यहाँ eq विधि, :eq चयनकर्ता के quick comparison और :first चयनकर्ता (के बाद से यह सिर्फ eq(0) के उपनाम है मैं first विधि के साथ परेशान नहीं किया था) के परिणाम है इस बेकार वाक्य के बिना पोस्ट करने के लिए छोटा है।

संपादित करें यह निश्चित रूप से धीमा विकल्प है। जैम के स्पीड टेस्ट को देखने के बाद, ऐसा लगता है कि jQuery चयनकर्ता सबसे अच्छा काम करते हैं जब वे सीएसएस चयनकर्ताओं से पीछे हट जाते हैं।

+0

@JamesAllardice यह बराबर है। सबसे पहले(), क्योंकि दोनों एक एकल तत्व से मेल खाते हैं। चाहे वांछित प्रभाव वेब_Designer की चुनौती पर निर्भर करता है। – Colin

+0

@ फेरेल - हाँ, यह '.irst' और': first' और ': eq (0)' और ': lt (1)' के बराबर है (jQuery के साथ एक ही चीज़ लिखने के कई तरीके हैं), लेकिन यह गुच्छा का उपवास होना चाहिए। –

+0

@ आरकेडब्ल्यू - ध्यान दें कि ': एनएच-चाइल्ड' बराबर नहीं है और इस मामले में काम नहीं करेगा। आप यह सोचने में सही हैं कि चयनकर्ता सबसे अच्छा काम करते हैं जब उनके पास सीएसएस समकक्ष होता है, खासकर आधुनिक ब्राउज़र में, क्योंकि मूल 'क्वेरी चयनकर्ता' और 'querySelectorAll' विधियों का उपयोग सिज़ल के बजाय किया जा सकता है। –

0
$('div p').first() 

काम करना चाहिए। मुझे लगता है।

2

$ ("div p")। पहला();

या $ ('div p: first');

संदर्भ: http://api.jquery.com/first/

ध्यान रखें कि पहले() केवल एक ही तत्व से मेल खाता रखें,: हर माता-पिता के लिए एक: पहली बच्चे चयनकर्ता एक से अधिक मिलान कर सकते हैं।

1

आपको लगभग जवाब पता है (आपके पोस्ट शीर्षक से)। JQuery में एक चयनकर्ता है जिसे :first-of-type कहा जाता है। खोजने के लिए और स्वचालित रूप से पहले पी टैग करने के लिए वर्ग को जोड़ने के लिए है, इसलिए है कि यह प्रयोग करें:

$("div p:first-of-type").addClass('someClass'); 
+0

: प्रथम प्रकार का और: अंतिम प्रकार का प्रकार jQuery के बाद उपलब्ध है 1.9 – Bell

-1

यह काम करना चाहिए

$("div p:first-of-type").css("font-size: 10px"); 

ऊपर कोड div में पहले पैराग्राफ पाता है के रूप में @Denver ओर इशारा किया और बदला इसके fonts-size10px

यहाँ के लिए एक उदाहरण है कि और भी अधिक के बारे में jQuery first-of-type selector

+0

नहीं, यह नहीं होना चाहिए। यह जवाब, अनिवार्य रूप से, डेवनर द्वारा डेढ़ साल पहले दिए गए एक के समान है (http://stackoverflow.com/a/16381687/19068) सिवाय इसके कि आपने इसे गलत तत्व का चयन करने के लिए बदल दिया है। – Quentin

+0

सहमत! और कोड संपादित किया। धन्यवाद – Packer

संबंधित मुद्दे