सवाल क्या jQuery के लिए कोई "मौजूद" फ़ंक्शन है?


मैं jQuery में किसी तत्व के अस्तित्व की जांच कैसे कर सकता हूं?

मेरे पास वर्तमान कोड यह है:

if ($(selector).length > 0) {
    // Do something
}

क्या इस दृष्टिकोण के लिए एक और शानदार तरीका है? शायद एक प्लगइन या एक समारोह?


2330
2017-08-27 19:49


मूल




जवाब:


जावास्क्रिप्ट में, सब कुछ 'सच्चाई' या 'झूठी' है, और संख्याओं के लिए 0 (और NaN) का मतलब है false, बाकि सब कुछ true। तो आप लिख सकते हैं:

if ($(selector).length)

आपको इसकी आवश्यकता नहीं है >0 अंश।


2072
2018-02-25 19:16



अगर आप आईडी चयनकर्ता का उपयोग करते हैं तो यह त्रुटि फेंक देगा यदि तत्व मौजूद नहीं है। मेरे जवाब में मैंने किए गए विभिन्न परीक्षणों की जांच करें - abhirathore2006
@ abhirathore2006 यदि आप एक आईडी चयनकर्ता का उपयोग करते हैं और तत्व मौजूद नहीं है तो लंबाई 0 है और अपवाद नहीं फेंकता है। - Robert
दिलचस्प रूप से NaN != false। - Robert
@ रॉबर्ट और [] + [] = ""... आह मैं जावास्क्रिप्ट प्यार करता हूँ - James
@deblocker एक वीडियो है मुझे लगता है कि आप पसंद करेंगे! - James


हाँ!

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

यह जवाब में है: जेफ एटवुड के साथ हर्डिंग कोड पॉडकास्ट


1247
2017-08-27 19:50



मैं बस लिखता हूं: अगर ($ (चयनकर्ता)। लम्बाई) {...} बिना '> 0' - vsync
तुंहारे $.fn.exists उदाहरण दो फ़ंक्शन कॉल के साथ एक प्रॉपर्टी लुकअप (सस्ता!) को प्रतिस्थापित कर रहा है, जो कि अधिक महंगे हैं- और उनमें से एक फ़ंक्शन कॉल आपके पास पहले से मौजूद एक jQuery ऑब्जेक्ट को पुन: प्रयास करती है, जो कि मूर्खतापूर्ण है। - C Snover
@redsquare: कोड पठनीयता jQuery पर इस तरह के फ़ंक्शन को जोड़ने के लिए सबसे अच्छा तर्क है। कुछ कहा जा रहा है .exists जबकि, साफ से पढ़ता है .length अर्थात् कुछ अर्थात् अलग-अलग के रूप में पढ़ता है, भले ही अर्थशास्त्र एक समान परिणाम के साथ मेल खाता हो। - Ben Zotto
@quixoto, क्षमा करें, लेकिन लम्बाई कई भाषाओं में एक मानक है जिसे रैपिंग की आवश्यकता नहीं है। आप और कैसे व्याख्या करते हैं। लम्बाई? - redsquare
मेरी राय में, "अस्तित्व के लिए एक चयनकर्ता लिखा है" तत्व की अवधारणा के लिए "शून्य से अधिक की एक सूची लंबाई" की अवधारणा से कम से कम एक तार्किक संकेत है। हाँ, वे तकनीकी रूप से एक ही बात हैं, लेकिन वैचारिक अमूर्तता एक अलग स्तर पर है। इससे कुछ लोगों को कुछ प्रदर्शन लागत पर भी एक और स्पष्ट संकेतक पसंद करते हैं। - Ben Zotto


यदि आप इस्तेमाल करते हैं

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

आप यह इंगित करेंगे कि जब यह नहीं है तो चेनिंग संभव था।

यह बेहतर होगा:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

वैकल्पिक रूप से, एफएक्यू से:

if ( $('#myDiv').length ) { /* Do something */ }

आप निम्नलिखित का भी उपयोग कर सकते हैं। यदि jQuery ऑब्जेक्ट सरणी में कोई मान नहीं है तो सरणी में पहला आइटम प्राप्त करना अनिर्धारित होगा।

if ( $('#myDiv')[0] ) { /* Do something */ }

324
2018-01-14 19:46



पहली विधि बेहतर पढ़ती है। $ ("a") मौजूद है () "if <a> तत्व मौजूद हैं" के रूप में पढ़ता है। $ .exists ("a") "यदि मौजूद है <a> तत्व" के रूप में पढ़ता है। - strager
सच लेकिन फिर, आप यह कह रहे हैं कि चेनिंग संभव है और अगर मैंने $ (selector) .exists ()। css ("रंग", "लाल") जैसे कुछ करने की कोशिश की तो यह काम नहीं करेगा और फिर मैं = * ( - Jon Erickson
ऐसे पहले से ही विधियां हैं जो अक्षरों और डेटा फ़ंक्शंस जैसी श्रृंखला योग्य नहीं हैं। मैं यद्यपि आपका मुद्दा देखता हूं और, इसके लायक होने के लिए, मैं बस लंबाई> 0 के लिए परीक्षण करता हूं। - Matthew Crumley
धरती पर आपको इसकी श्रृंखला क्यों चाहिए? $(".missing").css("color", "red") पहले से ही सही काम करता है ... (यानी कुछ भी नहीं) - Ben Blank
चेनिंग के बारे में सामान पूरी टोश है - वहाँ हैं खूब jQuery का $.fn वे विधियां जो एक नई jQuery ऑब्जेक्ट के अलावा कुछ और लौटती हैं और इसलिए चेन नहीं करती हैं। - Alnitak


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

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }

98
2018-04-03 12:17



क्या आपने नहीं देखा कि टिम बुथ ने इसे पहले से ही दिया था उत्तर आप से 2 साल पहले? - Th4t Guy
पीएफटी, टिम ने कभी नहीं दिखाया कि तत्व कैसे मौजूद है या नहीं। - Jeremy W
आपका मतलब जीवन "और" है? मेरा क्यू यह है: गलती, यह अस्तित्व में होना चाहिए या चयनकर्ता मेल नहीं खाता है। लंबाई अनावश्यक है। - RichieHH
यह उत्तर और टिप्पणियां बताती हैं कि कैसे स्टैक ओवरफ्लो काम करता है - aswzen


अस्तित्व की जांच करने के लिए सबसे तेज़ और सबसे अर्थात् आत्म व्याख्या करने का तरीका वास्तव में सादा जावास्क्रिप्ट का उपयोग करके है:

if (document.getElementById('element_id')) {
    // Do something
}

यह jQuery लंबाई विकल्प से लिखने के लिए थोड़ा लंबा है, लेकिन यह एक मूल जेएस विधि है क्योंकि तेजी से निष्पादित करता है।

और यह आपके स्वयं के jQuery फ़ंक्शन को लिखने के विकल्प से बेहतर है। @Nnover ने कहा कारणों के कारण, यह विकल्प धीमा है। लेकिन यह अन्य प्रोग्रामर को इंप्रेशन भी देगा कि मौजूद () फ़ंक्शन jQuery के लिए निहित कुछ है। जावास्क्रिप्ट को अन्य लोगों द्वारा आपके कोड को संपादित किए बिना समझ लिया जाना चाहिए, बिना ज्ञान ऋण के।

एनबी: element_id से पहले '#' की कमी पर ध्यान दें (क्योंकि यह सादा जेएस है, jQuery नहीं है)।


73
2018-01-11 12:27



पूरी तरह से एक ही बात नहीं है। JQuery चयनकर्ताओं का उपयोग किसी भी सीएसएस नियम के लिए किया जा सकता है - उदाहरण के लिए $('#foo a.special')। और यह एक से अधिक तत्व वापस कर सकता है। getElementById उस तक पहुंचने के लिए शुरू नहीं कर सकते हैं। - kikito
आप सही हैं कि यह चयनकर्ताओं के रूप में व्यापक रूप से लागू नहीं है। हालांकि, यह सबसे आम मामले में नौकरी काफी अच्छी तरह से करता है (यह जांचना कि एक तत्व मौजूद है या नहीं)। आत्म-स्पष्टीकरण और गति का तर्क अभी भी खड़ा है। - Magne
@Noz if(document.querySelector("#foo a.special")) काम करेगा। कोई jQuery की आवश्यकता नहीं है। - Blue Skies
जेएस इंजन में गति का तर्क केवल उन लोगों के दिमाग में मर चुका है जो jQuery के बिना काम नहीं कर सकते हैं, क्योंकि यह एक तर्क है कि वे जीत नहीं सकते हैं। - Blue Skies
अच्छे पुराने दिनों को याद रखें जब document.getElementById हमारे पास था? और मैं हमेशा दस्तावेज़ भूल गया। और यह पता नहीं लगा सका कि यह क्यों काम नहीं कर रहा था। और मैंने हमेशा इसे गलत लिखा और चरित्र को गलत तरीके से आ गया। - JustJohn


आप लिखकर कुछ बाइट्स बचा सकते हैं:

if ($(selector)[0]) { ... }

यह काम करता है क्योंकि प्रत्येक jQuery ऑब्जेक्ट भी एक सरणी के रूप में masquerades, तो हम पहले आइटम प्राप्त करने के लिए सरणी dereferencing ऑपरेटर का उपयोग कर सकते हैं सरणी। यह वापस आता है undefined यदि निर्दिष्ट सूचकांक पर कोई आइटम नहीं है।


53
2018-01-18 09:04



मैं इस सटीक उत्तर को पोस्ट करने के लिए यहां आया ... अनिवार्य पहेली: jsfiddle.net/jasonwilczak/ekjj80gy/2 - JasonWilczak
@JasonWilczak टिप्पणी करने के लिए देखभाल क्यों नहीं: .eq [0] या .first () कास्टिंग प्रकार के बजाय पाए गए पहले तत्व को संदर्भित करने के लिए? - Jean Paul A.K.A el_vete
नहीं, jQuery.first() या jQuery.eq(0) दोनों वस्तुएं लौटती हैं, वस्तुएं सत्य होती हैं भले ही वे खाली-आश हो। इस उदाहरण को स्पष्ट करना चाहिए कि इन कार्यों का उपयोग क्यों नहीं किया जा सकता है: if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists") - Salman A
सही बात। .eq(0) 1 या 0 लंबाई तक छोटा एक और jQuery ऑब्जेक्ट देता है। .first() सिर्फ एक सुविधा विधि है .eq(0)। परंतु .get(0) पहला डीओएम तत्व देता है या undefined और जैसा ही है [0]। एक jQuery ऑब्जेक्ट में पहला DOM तत्व नाम के साथ नियमित ऑब्जेक्ट प्रॉपर्टी में संग्रहीत होता है '0'। यह एक साधारण संपत्ति का उपयोग है। एकमात्र प्रकार का कास्टिंग संख्या के निहित रूपांतरण से उत्पन्न होता है 0 स्ट्रिंग के लिए '0'। तो अगर टाइप कास्टिंग एक समस्या है तो आप इसका उपयोग कर सकते हैं $.find(selector)['0'] बजाय। - Robert


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

if ($(selector).is('*')) {
  // Do something
}

थोड़ा अधिक सुरुचिपूर्ण, शायद।


50
2017-09-17 17:53



यह इतनी सरल चीज़ के लिए बहुत अधिक है। टिम बुथ जवाब देखें - vsync
यह सही जवाब है। 'लंबाई' विधि में समस्या है कि यह किसी भी संख्या के साथ झूठी सकारात्मक देता है, उदाहरण के लिए: $ (666)। लम्बाई // रिटर्न 1, लेकिन यह वैध चयनकर्ता नहीं है - earnaz
यह बहुत ही सरल काम के लिए बेहद महंगा है। बस .is () में jquery कार्यान्वयन को देखें और आप देखेंगे कि इस सरल प्रश्न का उत्तर देने के लिए आपको कितना कोड संसाधित करने की आवश्यकता है। यह भी स्पष्ट नहीं है कि आप वास्तव में क्या करना चाहते हैं, इसलिए यह प्रश्न में समाधान के समान या शायद कम सुरुचिपूर्ण है। - micropro.cz
@earnaz महान बिंदु, अच्छा पकड़ो। मैं नहीं देखता कि यह वास्तव में एक सार्थक चिंता कहां है। देवताओं के साथ तत्वों की पहचान 666 शायद उनके कोड टूटा हुआ कई अन्य कारण हैं। हालांकि यह एक अवैध चयनकर्ता है, $ (666)। लम्बाई मान्य जावास्क्रिप्ट है: यह सच्चाई का मूल्यांकन करता है, और इसलिए चाहिए स्थिति को पूरा करें। - Todd
उस विशिष्ट मामले से बचने के लिए @earnaz, $.find(666).length काम करता है। - Emile Bergeron


इस प्लगइन को एक में इस्तेमाल किया जा सकता है if जैसे बयान if ($(ele).exist()) { /* DO WORK */ } या एक कॉलबैक का उपयोग कर।

लगाना

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

आप एक या दो कॉलबैक निर्दिष्ट कर सकते हैं। तत्व मौजूद होने पर पहला व्यक्ति आग लगाएगा, दूसरा तत्व अगर आग करेगा तो आग लग जाएगी नहीं मौजूद। हालांकि, अगर आप केवल एक समारोह को पारित करना चुनते हैं, तो यह तत्व तब मौजूद होगा जब तत्व मौजूद होगा। इस प्रकार, चयनित तत्व करता है तो श्रृंखला मर जाएगी नहीं मौजूद। बेशक, यदि यह अस्तित्व में है, तो पहला कार्य आग लगेगा और श्रृंखला जारी रहेगी।

ध्यान रखें कि इसका उपयोग करना कॉलबैक संस्करण सक्षमता बनाए रखने में मदद करता है - तत्व वापस आ गया है और आप किसी भी अन्य jQuery विधि के साथ चेनिंग कमांड जारी रख सकते हैं!

उदाहरण उपयोग करता है

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})

48
2017-11-14 14:20



कॉलबैक संस्करण पर, नहीं होना चाहिए Has Items कॉलबैक वास्तव में एक तर्क के रूप में वस्तु में गुजरता है? - Chris Marisic


वास्तव में jQuery के लिए कोई ज़रूरत नहीं है। सादे जावास्क्रिप्ट के साथ यह जांचना आसान और अर्थात् सही है:

if(document.getElementById("myElement")) {
    //Do something...
}

यदि किसी भी कारण से आप तत्व को आईडी नहीं रखना चाहते हैं, तो भी आप डीओएम तक पहुंचने के लिए डिज़ाइन की गई किसी भी अन्य जावास्क्रिप्ट विधि का उपयोग कर सकते हैं।

jQuery वास्तव में अच्छा है, लेकिन शुद्ध जावास्क्रिप्ट को विस्मरण में गिरावट मत देना ...


44
2018-05-20 09:21



मुझे पता है: यह सीधे मूल प्रश्न का जवाब नहीं देता है (जो एक jquery फ़ंक्शन के लिए पूछता है), लेकिन उस स्थिति में उत्तर "नहीं" या "अर्थात् सही समाधान नहीं होगा"। - amypellegrini