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




(20)

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

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

मैं 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
    }
);

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

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

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

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

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

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

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


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

कैसा रहेगा:

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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



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

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

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

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

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

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

if($("selector").length){
   //code in the case
} 

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

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


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




jquery