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




(24)

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

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

if ($(selector).length > 0) {
    // 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 ($(selector)[0]) { ... }

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


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

if ($(selector).length)

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


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

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

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

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

$.contains() दो डोम तत्व लेता है और जांच करता है कि पहले व्यक्ति में दूसरा स्थान है या नहीं।

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

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

$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }
td { border: 1px solid black }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>


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

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

मुझे पता चला है 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

पिछले सभी उत्तरों के कारण। .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);

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

if ($(selector).exists()) {
    // the element exists, now what?...
}

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

$.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.getElementById("myElement")) {
    //Do something...
}

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

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


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

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


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

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

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

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

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

jQuery.contains( container, contained )

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

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


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

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

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


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

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

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

कैसा रहेगा:

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

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

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


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

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

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





jquery