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



14 Answers

हाँ!

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

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

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

Question

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

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

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

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




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

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

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




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

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

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

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

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



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

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



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

jQuery.contains (कंटेनर, निहित)

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

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




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

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

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



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

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



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

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




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

['लंबाई'] पैरामीटर की आवश्यकता नहीं है या उपयोगी नहीं है और अगर आप सीधे 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;

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

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);



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

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



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

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

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




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

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}



$(selector).length && //Do something



कैसा रहेगा:

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

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

यह बहुत ही कम है और चयनकर्ता को हर बार $() साथ संलग्न करने के लिए बचाता है।




इस प्लगइन का उपयोग 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    */
    }
})





Related