Question Y a-t-il une fonction "existe" pour jQuery?


Comment puis-je vérifier l'existence d'un élément dans jQuery?

Le code actuel que j'ai est:

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

Y a-t-il une façon plus élégante d'aborder cela? Peut-être un plugin ou une fonction?


2322
2017-08-27 19:49


origine


Réponses:


En JavaScript, tout est "vrai" ou "falsifié", et pour les chiffres 0 (et NaN) signifie false, tout le reste true. Donc tu pourrais écrire:

if ($(selector).length)

Tu n'as pas besoin de ça >0 partie.


2062
2018-02-25 19:16



Oui!

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

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

Ceci est en réponse à: Podcast Herding Code avec Jeff Atwood


1247
2017-08-27 19:50



Si vous avez utilisé

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

vous impliqueriez que l'enchaînement était possible quand ce n'est pas le cas.

Ce serait mieux:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

Alternativement, de la FAQ:

if ( $('#myDiv').length ) { /* Do something */ }

Vous pouvez également utiliser ce qui suit. Si le tableau d'objets jQuery ne contient aucune valeur, l'obtention du premier élément du tableau renvoie undefined.

if ( $('#myDiv')[0] ) { /* Do something */ }

323
2018-01-14 19:46



Vous pouvez utiliser ceci:

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

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

98
2018-04-03 12:17



La manière la plus rapide et la plus sémantiquement explicite de vérifier l'existence est en fait en utilisant du JavaScript simple:

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

Il est un peu plus long à écrire que l'option de longueur jQuery, mais s'exécute plus rapidement car il s'agit d'une méthode JS native.

Et c'est mieux que l'alternative d'écrire votre propre fonction jQuery. Cette alternative est plus lente, pour les raisons indiquées par @snover. Mais cela donnerait aussi aux autres programmeurs l'impression que la fonction exists () est quelque chose d'inhérent à jQuery. JavaScript devrait / devrait être compris par d'autres personnes qui éditent votre code, sans augmentation de la dette de connaissances.

NB: Notez l'absence d'un '#' avant l'élément_id (puisqu'il s'agit de JS, pas de jQuery).


73
2018-01-11 12:27



Vous pouvez enregistrer quelques octets en écrivant:

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

Cela fonctionne parce que chaque objet jQuery se comporte également comme un tableau, de sorte que nous pouvons utiliser l'opérateur de déréférencement de tableau pour obtenir le premier élément de la table. tableau. Ça revient undefined s'il n'y a pas d'article à l'index spécifié.


53
2018-01-18 09:04



Vous pouvez utiliser:

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

UNE peu plus élégant, peut-être.


50
2017-09-17 17:53



Ce plugin peut être utilisé dans un if déclaration comme if ($(ele).exist()) { /* DO WORK */ } ou en utilisant un rappel.

Brancher

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

Vous pouvez spécifier un ou deux rappels. Le premier tirera si l'élément existe, le second tirera si l'élément fait ne pas exister. Cependant, si vous choisissez de ne transmettre qu'une seule fonction, elle ne se déclenchera que lorsque l'élément existera. Ainsi, la chaîne mourra si l'élément sélectionné ne pas exister. Bien sûr, s'il existe, la première fonction se déclenchera et la chaîne continuera.

Gardez à l'esprit que l'utilisation de variante de rappel aide à maintenir la chaîne - l'élément est retourné et vous pouvez continuer à chaîner les commandes comme avec n'importe quelle autre méthode jQuery!

Exemples d'utilisations

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

48
2017-11-14 14:20



Il n'y a pas vraiment besoin de jQuery. Avec JavaScript simple, il est plus facile et sémantiquement correct de vérifier:

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

Si, pour une raison quelconque, vous ne voulez pas mettre un identifiant dans l'élément, vous pouvez toujours utiliser toute autre méthode JavaScript conçue pour accéder au DOM.

jQuery est vraiment cool, mais ne laissez pas le JavaScript pur tomber dans l'oubli ...


43
2018-05-20 09:21



Je vois que la plupart des réponses ne sont pas exactes comme il se doit, elles vérifient la longueur des éléments, ça peut être OK dans beaucoup de cas, mais pas 100%, imaginez si le nombre passe à la fonction, donc je prototyper une fonction qui vérifie tout conditions et renvoyer la réponse comme il se doit:

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

Cela va vérifier à la fois la longueur et le type, Maintenant, vous pouvez le vérifier de cette façon:

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

40
2018-06-01 07:20