वहाँ jQuery के लिए एक "अस्तित्व" समारोह है?

2778

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

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

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

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

javascript  jquery 
— जेक मैकग्रा
स्रोत

जवाबों:

2489

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

if ($(selector).length)

आपको उस >0भाग की आवश्यकता नहीं है ।

— टिम बुथ
स्रोत
52
@ abhirathore2006 यदि आप एक आईडी चयनकर्ता का उपयोग करते हैं और तत्व मौजूद नहीं है, तो लंबाई 0 है और अपवाद नहीं फेंकता है।
— रॉबर्ट
14
दिलचस्प रूप से पर्याप्त है NaN != false।
— रॉबर्ट
35
@ रॉबर्ट और [] + []= ""... आह मुझे जावास्क्रिप्ट पसंद है
— जेम्स
9
@ जेम्स ऐसा इसलिए है क्योंकि [].toString() === [].join(',') === ""और "" === ""।
— इस्माइल मिगुएल
5
@ रॉबर्ट औरtypeof NaN == 'number'
— oriadam
1356

हाँ!

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

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

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

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

अगर आपने इस्तेमाल किया

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 */ }
— जॉन एरिकसन
स्रोत
11
पहली विधि बेहतर पढ़ती है। $ ("ए") मौजूद है () के रूप में पढ़ता है "अगर <चित्र तत्व मौजूद हैं।" $ .exists ("ए" के रूप में पढ़ता है "अगर वहाँ मौजूद है <a> तत्व।"
— स्ट्रैजर
16
सच है लेकिन फिर से, आप समझ रहे हैं कि चेनिंग संभव है और अगर मैंने $ (चयनकर्ता) .exists ()। css ("रंग", "लाल") की तरह कुछ करने की कोशिश की तो यह काम नहीं करेगा और फिर मैं = *
— जॉन एरिकसन
19
पहले से ही ऐसे तरीके हैं जो चेनेबल नहीं हैं, जैसे एटर और डेटा फ़ंक्शन। मैं आपकी बात को देखता हूं, हालांकि, इसकी कीमत क्या है, मैं सिर्फ लंबाई> 0 के लिए परीक्षण करता हूं।
— मैथ्यू Crumley
39
पृथ्वी पर आपको इसकी श्रृंखला बनाने की आवश्यकता क्यों होगी? $(".missing").css("color", "red")पहले से ही सही काम करता है ... (यानी कुछ भी नहीं)
— बेन ब्लैंक
15
चेनिंग के बारे में सामान पूरी तरह से टॉस है - बहुत सारे jQuery के $.fnतरीके हैं जो एक नए jQuery ऑब्जेक्ट के अलावा कुछ और लौटाते हैं और इसलिए चेन नहीं करते हैं।
— अलनीतक
136

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

// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
— यानि
स्रोत
134
क्या आपने नहीं देखा कि टिम बुथ ने आपको 2 साल पहले ही यह जवाब दे दिया था ?
— Th4t लड़का
101
Pfft, टिम ने कभी नहीं दिखाया कि यदि तत्व मौजूद नहीं है तो परीक्षण कैसे करें।
— जेरेमी डब्ल्यू
1
आप जीवन का अर्थ है "और"? मेरा क्यू यह है: गलत, यह मौजूद होना चाहिए या चयनकर्ता मेल नहीं खाता है। लंबाई सतही है।
— रिची एचएच
26
इस जवाब और टिप्पणियाँ sums कैसे stackoverflow काम करता है
— aswzen
101

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

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

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

और यह अपने स्वयं के jQueryफ़ंक्शन लिखने के विकल्प से बेहतर है । वह विकल्प धीमा है, जिन कारणों के लिए @snover ने कहा है। लेकिन यह अन्य प्रोग्रामर्स को यह आभास भी देगा कि दexists() फ़ंक्शन jQuery के लिए अंतर्निहित है। JavaScriptअन्य लोगों द्वारा अपना कोड संपादित किया जाना चाहिए, बिना ज्ञान ऋण में वृद्धि के।

NB:element_id ( ' यह सादा JS है, नहीं है ' से पहले '#' की कमी पर ध्यान दें jQuery।

— मैग्ने
स्रोत
56
पूरी तरह से एक ही बात नहीं है। JQuery के चयनकर्ताओं का उपयोग किसी भी CSS नियम के लिए किया जा सकता है - उदाहरण के लिए $('#foo a.special')। और यह एक से अधिक तत्वों को वापस कर सकता है। getElementByIdउस तक पहुंचना शुरू नहीं कर सकता।
— किक्टो
7
आप सही हैं कि यह चयनकर्ताओं के रूप में व्यापक रूप से लागू नहीं है। हालांकि, यह सबसे आम मामले में काम करता है (यदि एक भी तत्व मौजूद है) की जाँच। आत्म-स्पष्टीकरण और गति के तर्क अभी भी खड़े हैं।
— मैग्ने
29
@ नोज if(document.querySelector("#foo a.special"))काम करेगा। कोई jQuery की जरूरत है।
— नीला आसमान
34
जेएस इंजन में गति का तर्क केवल उन लोगों के दिमाग में मृत है जो jQuery के बिना काम नहीं कर सकते, क्योंकि यह एक तर्क है जो वे जीत नहीं सकते हैं।
— नीला आसमान
22
अच्छे पुराने दिनों को याद करें जब document.getElementById हमारे पास था? और मैं हमेशा दस्तावेज़ भूल गया। और यह पता नहीं लगा सका कि यह काम क्यों नहीं किया। और मैंने हमेशा इसे गलत बताया और चरित्र को गलत साबित कर दिया।
— जस्टजॉन
73

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

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

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

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

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

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

एक छोटे से अधिक सुरुचिपूर्ण, शायद।

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

इस प्लगइन को एक 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

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

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

उदाहरण उपयोग

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    */
    }
})
— SpYk3HH
स्रोत
1
कॉलबैक संस्करण पर, Has Itemsकॉलबैक को वास्तव में तर्क के रूप में ऑब्जेक्ट में पास नहीं करना चाहिए ?
— क्रिस मैरिसिक
62

मैं देख रहा हूं कि अधिकांश उत्तर यहां सटीक नहीं हैं क्योंकि उन्हें होना चाहिए, वे तत्व की लंबाई की जांच करते हैं, यह कई मामलों में ठीक हो सकता है , लेकिन 100% नहीं , कल्पना करें कि संख्या इसके बजाय फ़ंक्शन से गुजरती है, इसलिए मैं एक फ़ंक्शन को प्रोटोटाइप करता हूं जो सभी की जांच करता है स्थितियाँ और उत्तर को उसी तरह वापस करना चाहिए जैसे यह होना चाहिए:

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

यह लंबाई और प्रकार दोनों की जांच करेगा, अब आप इसे इस तरह से देख सकते हैं:

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true
— एलिरेज़ा
स्रोत
55

वास्तव में jQuery की कोई आवश्यकता नहीं है। सादे जावास्क्रिप्ट के साथ यह जांचना आसान और शब्दशः सही है:

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

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

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

— amypellegrini
स्रोत
5
मुझे पता है: यह सीधे मूल प्रश्न का उत्तर नहीं देता है (जो कि एक jquery फ़ंक्शन के लिए पूछता है), लेकिन उस स्थिति में उत्तर "नहीं" या "शब्दार्थ रूप से सही समाधान नहीं" होगा।
— amypellegrini
यदि आपको माता-पिता के चयनकर्ता की आवश्यकता है तो क्या होगा :has()?
— Константин Ван
54

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

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something*/}
— अमिताभ
स्रोत
43

पिछले सभी उत्तरों के कारण .lengthपैरामीटर की आवश्यकता होती है, वे ज्यादातर jquery के $()चयनकर्ता का उपयोग कर रहे हैं, जिसमें पर्दे के पीछे querySelectorAll है (या वे इसे सीधे उपयोग कर रहे हैं)। यह विधि धीमी है, क्योंकि इसे संपूर्ण चयनकर्ता को उस चयनकर्ता को सभी मैचों की तलाश करने और उनके साथ एक सरणी पॉप्युलेट करने की आवश्यकता है।

['लंबाई'] पैरामीटर की जरूरत नहीं है या उपयोगी नहीं है और यदि आप document.querySelector(selector)इसके बजाय सीधे उपयोग करते हैं तो कोड बहुत तेज होगा , क्योंकि यह पहले तत्व से मेल खाता है या नहीं मिला तो वापस आ जाता है।

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

हालाँकि यह विधि हमें वास्तविक वस्तु को वापस करने के साथ छोड़ देती है; जो ठीक है अगर इसे चर के रूप में सहेजा नहीं जा रहा है और बार-बार उपयोग किया जा रहा है (इस प्रकार यदि हम भूल जाते हैं तो संदर्भ को आसपास रखते हुए)।

var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */

कुछ मामलों में यह वांछित हो सकता है। इसका उपयोग इस तरह से लूप में किया जा सकता है:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

यदि आपको वास्तव में तत्व की आवश्यकता नहीं है और केवल एक सही / गलत को प्राप्त / स्टोर करना चाहते हैं, तो बस इसे डबल न करें !! यह उन जूते के लिए काम करता है जो अप्रयुक्त आते हैं, इसलिए यहां गाँठ क्यों?

function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);
— technosaurus
स्रोत
40

है $.contains()कि तुम क्या चाहते हो?

jQuery.contains( container, contained )

यह $.contains()विधि सही साबित होती है यदि दूसरा तर्क द्वारा प्रदान किया गया DOM तत्व पहले तर्क द्वारा प्रदान किए गए DOM तत्व का वंशज है, चाहे वह सीधा बच्चा हो या अधिक गहराई से घोंसला बनाने वाला। अन्यथा, यह गलत है। केवल तत्व नोड्स समर्थित हैं; यदि दूसरा तर्क एक पाठ या टिप्पणी नोड है, $.contains()तो गलत वापस आ जाएगा।

नोट : पहला तर्क एक DOM एलीमेंट होना चाहिए, न कि jQuery ऑब्जेक्ट या प्लेन जावास्क्रिप्ट ऑब्जेक्ट।

— राजमार्ग
स्रोत
3
यह एक चयनकर्ता को स्वीकार नहीं करता है, जिसका अर्थ है कि उसे इसका चयन करना होगा, जिसका अर्थ है कि वह अपने चयन के परिणाम की जांच कर सकता है।
39

मैंने if ($(selector).length) {}अपर्याप्त पाया है। selectorखाली वस्तु होने पर यह आपके ऐप को चुपचाप तोड़ देगा {}।

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

मेरा एकमात्र सुझाव इसके लिए एक अतिरिक्त जांच करना है {}।

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

मैं अभी भी एक बेहतर समाधान की तलाश कर रहा हूं, क्योंकि यह थोड़ा भारी है।

संपादित करें: चेतावनी! यह IE में काम नहीं करता है जब selectorएक स्ट्रिंग है।

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
— ओलेग
स्रोत
12
आप कितनी बार अपने आप $()को एक खाली वस्तु के साथ एक तर्क के रूप में बुलाते हैं ?
— nnnnnn
@nnnnnn वास्तव में कभी नहीं (मैं अब jQuery का उपयोग नहीं करते हैं)। लेकिन मुझे लगता है कि 3 साल पहले मेरे पास एक एपीआई को उजागर करने का मामला था जो एक चयनकर्ता को ले जाएगा और उस चयनकर्ता के लिए तत्वों की संख्या वापस कर देगा। यदि कोई अन्य देव एक खाली वस्तु में गुजरता है, तो यह गलत तरीके से 1 के साथ जवाब देगा
— ओलेग
3
पृथ्वी पर क्यों आप एक खाली वस्तु से होकर गुजरेगा {}लिए $()?
— सभी श्रमिक
7
@cpburnz तुम मुझसे क्यों पूछती हो? मैं सिर्फ एक एपीआई प्रदाता था ... लोग एपीआई के लिए सभी तरह की बेवकूफी भरी बातें करते हैं।
— ओलेग
4
बस देखा, jquery मुद्दा थ्रेड जो @FagnerBrack संदर्भित था उसकी टिप्पणी के तुरंत बाद अपडेट किया गया था; ऐसा लगता है कि यह सब के बाद दूर नहीं जा रहा है।
— जोसेफ गेब्रियल
38

आप जाँच सकते हैं कि तत्व मौजूद है या जावा स्क्रिप्ट में लंबाई का उपयोग नहीं कर रहा है। यदि लंबाई शून्य से अधिक है तो तत्व मौजूद है यदि लंबाई शून्य है तो तत्व मौजूद नहीं है 

// These by Id
if ($("#elementid").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

// These by Class
if ($(".elementClass").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}
— अनुराग देवकर
स्रोत
4
आपको यह जांचने की आवश्यकता नहीं है कि मौसम की लंबाई 0 से अधिक है, यदि ($ ('' प्राथमिक '))। लंबाई) {} पर्याप्त होगी।
— प्रणव लाबे
13
क्या आपने वास्तव में प्रश्न पढ़ा है? यह बिल्कुल वही विधि है जिसका उपयोग ओपी कर रहा है।
— A1PPun
34

एक तत्व के अस्तित्व के लिए जाँच करना आधिकारिक jQuery वेबसाइट में बड़े करीने से प्रलेखित है!

अपने चयनकर्ता द्वारा लौटाए गए jQuery संग्रह की .length संपत्ति का उपयोग करें :

if ($("#myDiv").length) {
    $("#myDiv").show();
}

ध्यान दें कि यह परीक्षण करना हमेशा आवश्यक नहीं है कि कोई तत्व मौजूद है या नहीं। निम्न कोड तत्व को दिखाएगा यदि यह मौजूद है, और कुछ भी नहीं (बिना किसी त्रुटि के) यदि यह नहीं है:

$("#myDiv").show();
— तिलक मैडी
स्रोत
31

यह सभी उत्तरों के समान है, लेकिन !ऑपरेटर को दो बार उपयोग क्यों नहीं करना चाहिए ताकि आप बूलियन प्राप्त कर सकें:

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
— सैंटियागो हर्नांडेज़
स्रोत
2
क्योंकि कभी-कभी अधिक कुशल हो Boolean(x)सकते हैं ।
28 
$(selector).length && //Do something
— sjg
स्रोत
19
ifजहां if2 बाइट्स की कीमत पर पठनीयता में सुधार होगा , वहां उपयोग करने से बचने के इन चतुर तरीकों से मुझे नफरत है ।
— एमिल बर्जरॉन
इसके अलावा, minifiers &&आप के लिए ये सब करेंगे ।
27

DOMतत्व के लिए परीक्षण का प्रयास करें

if (!!$(selector)[0]) // do stuff
— guest271314
स्रोत
27

हाईवे के उत्तर से प्रेरित होकर मैं निम्नलिखित बातों के साथ आया:

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

jQuery.contains दो DOM एलिमेंट्स लेता है और चेक करता है कि पहले वाले में दूसरा है या नहीं।

document.documentElementपहले तर्क के रूप में उपयोग करना existsविधि के शब्दार्थ को पूरा करता है जब हम इसे वर्तमान दस्तावेज़ में एक तत्व के अस्तित्व की जांच करने के लिए पूरी तरह से लागू करना चाहते हैं।

नीचे, मैं एक साथ एक टुकड़ा है कि तुलना रख दिया है jQuery.exists()के खिलाफ $(sel)[0]और $(sel).lengthजो दोनों वापसी दृष्टिकोण truthyके लिए मूल्यों $(4)जबकि $(4).exists()रिटर्न false। DOM में किसी तत्व के अस्तित्व की जाँच के संदर्भ में यह वांछित परिणाम प्रतीत होता है ।

कोड स्निपेट दिखाएं

— ओलिवर
स्रोत
26

JQuery की जरूरत नहीं (मूल समाधान)

if(document.querySelector('.a-class')) {
  // do something
}

नीचे बहुत अधिक प्रदर्शन विकल्प (एक वर्ग से पहले डॉट की कमी का नोटिस)।

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector jQuery में $ () (sizzle) जैसे एक उचित मिलान इंजन का उपयोग करता है और अधिक कंप्यूटिंग शक्ति का उपयोग करता है, लेकिन 99% मामलों में बस ठीक करेगा। दूसरा विकल्प अधिक स्पष्ट है और कोड को बताता है कि वास्तव में क्या करना है। यह jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25 के अनुसार बहुत तेज़ है

— पावेल
स्रोत
25

मैं सिर्फ ऐसा करने के लिए सादे वेनिला जावास्क्रिप्ट का उपयोग करना पसंद करता हूं।

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
— सानू उथैया बोलेरा
स्रोत
23

मैं इस सवाल पर अड़ गया और मैं वर्तमान में उपयोग किए जाने वाले कोड का एक स्निपेट साझा करना चाहूंगा:

$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}

और अब मैं इस तरह कोड लिख सकते हैं - 

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

यह बहुत कोड लग सकता है, लेकिन जब कॉफीस्क्रिप्ट में लिखा जाता है तो यह काफी छोटा होता है:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists
— Eternal1
स्रोत
9
मुझे लगता है कि ओपी का मूल दृष्टिकोण न केवल बहुत अधिक न्यूनतम है, बल्कि इससे अधिक सुरुचिपूर्ण है। जब ओपी की विधि कम होती है, तो यह कोड लिखने के लिए ओवरकिल की तरह लगता है और इसमें कॉलबैक शामिल नहीं होता है।
— Lev
साधारण मामलों के लिए - आप सही हैं। लेकिन अधिक जटिल स्थितियों के लिए दोनों मामलों में बहुत सारे कोड शामिल हैं जो मुझे लगता है कि मेरा दृष्टिकोण बेहतर है।
— Eternal1
4
किस जटिल स्थिति में यह दृष्टिकोण एक सरल से बेहतर होगा यदि / और कथन?
— जार्वल
19

मेरे पास एक मामला था जहां मैं देखना चाहता था कि क्या कोई वस्तु दूसरे के अंदर मौजूद है इसलिए मैंने चयनकर्ता के अंदर चयनकर्ता के लिए जाँच करने के लिए पहले उत्तर में कुछ जोड़ा।

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};
— jcreamer898
स्रोत
18

कैसा रहेगा:

function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}

यह बहुत न्यूनतम है और आपको $()हर बार चयनकर्ता को संलग्न करने से बचाता है ।

— जी सितारा
स्रोत
3
यह "अगर चीज मौजूद है" के बजाय "अगर चीज मौजूद है" के if($("#thing").exists(){}रूप में पढ़ता है, जो के रूप में पढ़ता है। इसके अलावा, यह jQuery तरीका नहीं है।
— 1
15

मैं इसका उपयोग कर रहा हूं:

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    );

श्रृंखला को तभी निष्पादित करें जब कोई jQuery तत्व मौजूद हो - http://jsfiddle.net/andres_314/vbNM3/2/

— andy_314
स्रोत
14

यहाँ existjQuery में मेरा पसंदीदा तरीका है

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

और अन्य संस्करण जो चयनकर्ता के मौजूद नहीं होने पर कॉलबैक का समर्थन करता है

$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};

उदाहरण:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);
— ducdhm
स्रोत
14

$("selector") वह वस्तु लौटाता है जिसके पास lengthसंपत्ति है। यदि चयनकर्ता को कोई तत्व मिलते हैं, तो उन्हें ऑब्जेक्ट में शामिल किया जाएगा। इसलिए यदि आप इसकी लंबाई की जांच करते हैं तो आप देख सकते हैं कि क्या कोई तत्व मौजूद है। जावास्क्रिप्ट में 0 == false, अगर आपको 0अपना कोड नहीं मिलता है तो चलेगा।

if($("selector").length){
   //code in the case
}
— कामुरन सोंसेक
स्रोत
5
"एक सरणी दें" - नहीं, यह नहीं है। यह आपको एक jQuery ऑब्जेक्ट देता है (जो एक सरणी के साथ कुछ गुण साझा करता है)। आपका उत्तर अनिवार्य रूप से 2009 के टिम बुथ के समान है।
— क्वेंटिन
11

यहाँ विभिन्न स्थितियों और जाँच करने का पूरा उदाहरण है कि अगर jQuery चयनकर्ता तत्व का उपयोग कर रहा है या नहीं, तो यह तत्व मौजूद है या नहीं क्योंकि यह सरणी या तत्वों को लौटाता है।

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

अंतिम समाधान 

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist
— abhirathore2006
स्रोत
आप अपने डिबगर में $ ("# xysyxxs") को आजमा सकते हैं, आप देखेंगे कि jquery अशक्त या अपरिभाषित नहीं है। तो अंतिम समाधान काम नहीं करेगा
— Béranger
11

आपको यह जाँचने की ज़रूरत नहीं है कि यह किस 0तरह से अधिक है $(selector).length > 0, $(selector).lengthयह तत्वों के अस्तित्व की जाँच करने के लिए पर्याप्त और एक सुंदर तरीका है। मुझे नहीं लगता कि इसके लिए केवल एक फ़ंक्शन लिखने के लायक है, यदि आप अधिक अतिरिक्त चीजें करना चाहते हैं, तो हां।

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
— आंद्रेई टोडोरट
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.