jQuery का पहला बच्चा "यह"

Question

मैं एक क्लिक किए गए समय से एक jQuery फ़ंक्शन में "इसे" पास करने की कोशिश कर रहा हूं जो उस क्लिक किए गए तत्व के पहले बच्चे पर jQuery को निष्पादित कर सकता है। लगता है यह सही नहीं हो सकता ...

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

जावास्क्रिप्ट:

function toggleSection(element) {
  element.toggleClass("redClass");
}

मैं कैसे संदर्भित करूं: तत्व का पहला बच्चा?

Comments

यदि आप jQuery का उपयोग कर रहे हैं, तो आप jQuery का उपयोग करके इवेंट हैंडलर को क्यों नहीं बांधते?

— विवि पलिठ

क्योंकि बाइंड इवेंट हैंडलर को पहले से ही डॉक्यूमेंट में शुरू करना होता है। () जो एक प्रदर्शन हिट जोड़ता है (यह IE6 के लिए एक ऐप है)। क्या कोई और तरीका है?

— मैकका 1

हम्म .. यकीन नहीं होता। JQuery का उपयोग करके बाइंडिंग मानक तरीका है (यदि आप पहले से jQuery का उपयोग कर रहे हैं)। जब आप उपयोग करते हैं तो आप किस तरह का प्रदर्शन कर रहे हैं jQuery(document).ready(...)?

— विविन पालीथ

यह 7+ डेवलपर्स के साथ एक बड़ा एप्लिकेशन है। इससे पहले कि मैं इसे थोड़ा साफ करने की कोशिश करूं, यह मूल रूप से 4+ सेकंड था। तो मैं इसे और अधिक जोड़ने से बचना चाहता हूं जब मुझे नहीं करना है :)

— macca1 20

Answer 1

यदि आप मौजूदा jQuery सेट द्वारा दिए गए संदर्भ के लिए एक चयनकर्ता को लागू करना चाहते हैं, तो खोज () फ़ंक्शन का प्रयास करें :

element.find(">:first-child").toggleClass("redClass");

जॉर्न शॉ-रोड ने उल्लेख किया कि आप शायद केवल संदर्भ तत्व का पहला प्रत्यक्ष वंशज खोजना चाहते हैं , इसलिए बच्चे का चयनकर्ता (>)। वह यह भी बताता है कि आप केवल बच्चों () फ़ंक्शन का उपयोग कर सकते हैं , जो खोजने के लिए बहुत समान है () लेकिन केवल पदानुक्रम में एक स्तर गहरा खोज करता है (जो आपको सभी की आवश्यकता है ...):

element.children(":first").toggleClass("redClass");

Comments

धन्यवाद! अच्छी तरह से काम। मुझे लगता है कि नीचे सूचीबद्ध अन्य तरीके भी काम करेंगे।

— मका 1

मेरा मानना ​​है कि find()सभी वंशजों के माध्यम से खोज होती है, और :first-childप्रति माता-पिता में एक तत्व का मिलान हो सकता है। इसलिए, इस क्वेरी के कई तत्वों के वापस आने की संभावना है। या मैं गलत हूँ?

— जोर्न शॉ-रोड

मुझे पता है कि यह एक पुराना प्रश्न / उत्तर है, लेकिन उस चयनकर्ता में ">" चयनकर्ता के माता-पिता के बिना चयनकर्ता का मूल्यह्रास किया जाता है (उदाहरण के लिए, ">: फर्स्टचिल्ड") jQuery 1.8 के रूप में। मैं बजाय उपयोग करने का सुझाव element.children(":first-child")याelement.children().first();

— केविन बी

@ केविनबी ने स्पष्ट रूप से निर्णय लिया कि वे इसे समाप्त नहीं करेंगे

— अलनीतक

सबसे अच्छा तरीका यह होगा कि सभी वस्तुओं पर पुनरावृति न की जाए और फिर पहले वाले को चुना जाए, जैसा कि कुछ ने यहां बताया है। यह BAD होगा।

— vsync

Answer 2

एकल के पहले बच्चे को पाने के लिए चयनकर्ता के साथ childrenफ़ंक्शन का उपयोग करें ::firstelement

element.children(":first").toggleClass("redClass");

Comments

element.children () [0] .toggleClass ( "redClass");

— ज़कोस

@ ज़ाकोस:TypeError: Object [object HTMLAnchorElement] has no method 'toggleClass'

— जोर्न शॉ-रोड

Answer 3

मैंने पहला बच्चा पाने के लिए अलग-अलग तरीकों से गति अंतर को देखने के लिए jsperf टेस्ट जोड़ा है (कुल 1000+ बच्चे)

दिया हुआ, notif = $('#foo')

jQuery के तरीके:

1. $(":first-child", notif) - 4,304 ऑप्स / सेक - सबसे तेज
2. notif.children(":first") - 653 ऑप्स / सेकंड - 85% धीमा
3. notif.children()[0] - 1,416 ऑप्स / सेक - 67% धीमा

देशी तरीके:

4. जावास्क्रिप्ट देशी ' ele.firstChild- 4,934,323 ops / sec (उपरोक्त सभी दृष्टिकोण 100% की तुलना में धीमे हैं firstChild)
5. JQery से मूल डोम ग्यारह : notif[0].firstChild- 4,913,658 op / sec

तो, पहले 3 jQuery के दृष्टिकोणों की सिफारिश नहीं की जाती है, कम से कम पहले बच्चे के लिए (मुझे संदेह है कि कई अन्य लोगों के साथ भी ऐसा ही होगा)। यदि आपके पास एक jQuery ऑब्जेक्ट है और पहले बच्चे को प्राप्त करने की आवश्यकता है, तो jQuery ऑब्जेक्ट से मूल डोम तत्व प्राप्त करें, सरणी संदर्भ [0] (अनुशंसित).get(0) का उपयोग करके या का उपयोग करें ele.firstChild। यह नियमित जावास्क्रिप्ट उपयोग के समान परिणाम देता है।

सभी परीक्षण क्रोम कैनरी बिल्ड v15.0.854.0 में किए गए हैं

Comments

वास्तव में, firstChildjQuery children()या चयनकर्ता प्रश्नों के समान परिणाम नहीं देगा । firstChildपाठ नोड्स को शामिल करेगा जो शायद ही कभी वांछित है। jQuery के contents()समारोह होगा उन्हें शामिल हैं, लेकिन children()नहीं होगा। नए ब्राउज़र समर्थन करते हैं firstElementChildजो पहले बाल तत्व देगा, लेकिन IE <9 इसका समर्थन नहीं करता है। इसलिए, यदि आप उपयोग करते firstChildहैं तो आपको पहले गैर-टेक्स्ट नोड बच्चे को मैन्युअल रूप से ढूंढना होगा।

— अधिकतम

$(":first-child", notif)$(":first", notif)अपेक्षित व्यवहार के लिए होना चाहिए । पूर्व सभी प्रथम-बाल तत्व वंशज वापस आ जाएगा।

— द्राजेन बेज़ेलोवुक

Answer 4

element.children().first();

सभी बच्चों को ढूंढें और उनमें से पहले प्राप्त करें।

Comments

अब तक की सबसे सरल विधि, और इससे अधिक कुशल .children(':first')।

— ग्रास डबल

यह अधिक कुशल कैसे है? ऐसा लगता है कि यह सभी बच्चों को मिलता है, फिर पहला बच्चा लेता है, और सिर्फ पहला बच्चा प्राप्त करता है।

— एंथनी मैकग्राथ

Answer 5

आपने कोशिश की है

$(":first-child", element).toggleClass("redClass");

मुझे लगता है कि आप अपने तत्व को अपनी खोज के लिए एक संदर्भ के रूप में सेट करना चाहते हैं। ऐसा करने के लिए एक बेहतर तरीका हो सकता है जो कुछ अन्य jQuery गुरु यहाँ में आशा करेंगे और आपको बाहर फेंक देंगे :)

Comments

यह विफल हो जाएगा अगर elementभव्य बच्चे हैं

— Alnitak

Answer 6

मैंने सिर्फ एक प्लगइन लिखा है जो उपयोग करता है .firstElementChild यदि संभव हो तो है, और यदि आवश्यक हो तो प्रत्येक व्यक्ति के नोड पर पुनरावृत्ति करता है:

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

यह एक शुद्ध DOM समाधान के रूप में तेज़ नहीं है, लेकिन क्रोम 24 के तहत jsperf परीक्षणों में यह किसी भी अन्य jQuery के चयनकर्ता-आधारित विधि की तुलना में तेजी से परिमाण के आदेशों का एक जोड़ा था।

Comments

मुझे यह प्लगइन पसंद है - लेकिन 2 मुद्दे हैं: 1) प्लगइन स्क्रिप्ट को सिर में शामिल नहीं किया जा सकता है क्योंकि document.bodyअभी तक इसे आरंभीकृत नहीं किया गया है, 2) प्रदर्शन केवल वैकल्पिक विकल्पों की तुलना में बहुत बेहतर है यदि बाल नोड्स की संख्या बहुत अधिक है। केवल कुछ बच्चों के लिए (10 से कम कहना) $('>:first-child',context)थोड़ा तेज है। केवल बच्चों की संख्या प्रदर्शन को प्रभावित करती है, गहराई को नहीं।

— कोडफैक्टर 5

@codefactor अच्छे बिंदु के बारे में document.body- मैं उस पर गौर करूंगा।

— अलनीतक

Answer 7

आप DOM का उपयोग कर सकते हैं

$(this).children().first()
// is equivalent to
$(this.firstChild)

Answer 8

यह इस तरह से एक साधारण जादू के साथ किया जा सकता है:

$(":first-child", element).toggleClass("redClass");

संदर्भ: http://www.snoopcode.com/jquery/jquery-first-child-selector

Answer 9

कृपया इसका उपयोग करें जैसे कि यह पहली चीज "myp" की तरह p को टैग करने के लिए एक वर्ग नाम दें

फिर निम्नलिखित कोड का उपयोग करें

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

Answer 10

यदि आप तत्काल पहला बच्चा चाहते हैं, तो आपको जरूरत है

    $(element).first();

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

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

बाहर की कोशिश करें: http://jsfiddle.net/vgGbc/2/

Comments

यह सिर्फ गलत है - अगर elementकोई DOM नोड है तो उसके $(element).first()बराबर है $(element), न कि उसका पहला बच्चा।

— अलनीतक

सहमत, अगर तत्व एक DOM नोड $ (एलिमेंट) है। प्यास () समतुल्य $ (एलिमेंट) है, तो इससे मुझे नॉकआउट

— JS