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




15 Answers

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

if ($(selector).length)

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

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

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

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

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




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

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 */ }



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

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

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

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

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




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

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

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




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

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

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

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




आप इसका इस्तेमाल कर सकते हैं:

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

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



मुझे पता चला है 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.');
}

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

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

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE



$.contains() क्या आप चाहते हैं?

jQuery.contains( container, contained )

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

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




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

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

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

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

$("#myDiv").show();



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

if (!!$(selector)[0]) // do stuff



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

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}



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

$.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



JQuery के लिए कोई ज़रूरत नहीं है

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



JQuery में मेरी पसंदीदा exist विधि यहां दी गई है

$.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
    }
);



if ( $('#myDiv').size() > 0 ) { //do something }

size() चयनकर्ता द्वारा लौटाए गए तत्वों की संख्या की गणना करता है




Related