Existe-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 le suivant:

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

Existe-t-il une manière plus élégante d'aborder cela? Peut-être un plugin ou une fonction?

En JavaScript, tout est «véridique» ou «falsifié», et pour les nombres 0(et NaN) signifie falsetout le reste true. Vous pouvez donc écrire:

if ($(selector).length)

Vous n'avez pas besoin de cette >0partie.

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

Si vous avez utilisé

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

cela impliquerait que le chaînage était possible alors qu'il ne l'est pas.

Ce serait mieux:

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

Alternativement, à partir de la FAQ :

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

Vous pouvez également utiliser ce qui suit. S'il n'y a pas de valeurs dans le tableau d'objets jQuery, obtenir le premier élément du tableau renverrait undefined.

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

Vous pouvez utiliser ceci:

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

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

La façon la plus rapide et la plus sémantiquement explicite de vérifier l'existence est en fait d'utiliser plain JavaScript:

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

Il est un peu plus long à écrire que l'alternative 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 jQueryfonction. Cette alternative est plus lente, pour les raisons indiquées par @snover. Mais cela donnerait également à d'autres programmeurs l'impression que la exists()fonction est quelque chose d'inhérent à jQuery. JavaScriptserait / devrait être compris par d'autres éditant votre code, sans augmentation de la dette de connaissances.

NB: Notez l'absence d'un '#' avant le element_id(puisque c'est du JS simple, pas jQuery).

Vous pouvez économiser quelques octets en écrivant:

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

Cela fonctionne car chaque objet jQuery se fait également passer pour un tableau, nous pouvons donc utiliser l'opérateur de déréférencement de tableau pour obtenir le premier élément du tableau . Il renvoie undefineds'il n'y a aucun élément à l'index spécifié.

Vous pouvez utiliser:

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

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

Ce plugin peut être utilisé dans une ifinstruction 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 se déclenchera si l'élément existe, le second se déclenchera si l'élément n'existe pas . 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é n'existe pas . Bien sûr, si elle existe, la première fonction se déclenchera et la chaîne continuera.

Gardez à l'esprit que l'utilisation de la variante de rappel permet de maintenir la chaîne - l'élément est renvoyé et vous pouvez continuer à chaîner des commandes comme avec toute autre méthode jQuery!

Exemples d'utilisation

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

Je vois que la plupart des réponses ici ne sont pas exactes comme elles devraient l'être, elles vérifient la longueur des éléments, cela peut être OK dans de nombreux cas, mais pas à 100% , imaginez si le nombre passe à la fonction à la place, donc je prototype une fonction qui vérifie tout conditions et retourner la réponse comme il se doit:

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

Cela vérifiera à la fois la longueur et le type, vous pouvez maintenant 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

Il n'y a pas vraiment besoin de jQuery. Avec du 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 souhaitez pas mettre d'ID 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 ...

Vous pouvez utiliser ceci:

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

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

La raison pour laquelle toutes les réponses précédentes nécessitent le .lengthparamètre est qu'elles utilisent principalement le $()sélecteur de jquery qui a querySelectorAll derrière les rideaux (ou ils l'utilisent directement). Cette méthode est plutôt lente car elle doit analyser l'arborescence DOM entière en recherchant toutes les correspondances avec ce sélecteur et en remplissant un tableau avec elles.

Le paramètre ['length'] n'est pas nécessaire ou utile et le code sera beaucoup plus rapide si vous l'utilisez directement à la document.querySelector(selector)place, car il renvoie le premier élément auquel il correspond ou null s'il n'est pas trouvé.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

Cependant, cette méthode nous laisse avec l'objet réel retourné; ce qui est bien s'il ne sera pas enregistré en tant que variable et utilisé à plusieurs reprises (conservant ainsi la référence si nous oublions).

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

Dans certains cas, cela peut être souhaité. Il peut être utilisé dans une boucle for comme ceci:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

Si vous n'avez pas vraiment besoin de l'élément et que vous voulez obtenir / stocker juste un vrai / faux, doublez-le pas !! Cela fonctionne pour les chaussures qui se délient, alors pourquoi nouer ici?

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

C'est $.contains()ce que tu veux?

jQuery.contains( container, contained )

La $.contains()méthode renvoie true si l'élément DOM fourni par le deuxième argument est un descendant de l'élément DOM fourni par le premier argument, qu'il soit un enfant direct ou imbriqué plus profondément. Sinon, elle renvoie false. Seuls les nœuds d'élément sont pris en charge; si le deuxième argument est un nœud de texte ou de commentaire, $.contains()renvoie false.

Remarque : Le premier argument doit être un élément DOM, pas un objet jQuery ou un objet JavaScript simple.

Je l'ai trouvé if ($(selector).length) {}insuffisant. Il cassera silencieusement votre application lorsqu'un selectorobjet est vide {}.

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

Ma seule suggestion est d'effectuer une vérification supplémentaire pour {}.

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

Je cherche toujours une meilleure solution car celle-ci est un peu lourde.

Edit: AVERTISSEMENT! Cela ne fonctionne pas dans IE quand selectorest une chaîne.

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

Vous pouvez vérifier que l'élément est présent ou n'utilise pas la longueur dans le script java. Si la longueur est supérieure à zéro, l'élément est présent. Si la longueur est nulle, l'élément n'est pas présent.

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

La vérification de l'existence d'un élément est parfaitement documentée sur le site officiel jQuery lui-même!

Utilisez la propriété .length de la collection jQuery retournée par votre sélecteur:

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

Notez qu'il n'est pas toujours nécessaire de tester si un élément existe. Le code suivant montrera l'élément s'il existe et ne fera rien (sans erreur) s'il ne le fait pas:

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

c'est très similaire à toutes les réponses, mais pourquoi ne pas utiliser l' !opérateur deux fois pour obtenir un booléen:

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

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

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

Essayez de tester l' DOMélément

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

Inspiré par la réponse de hiway, j'ai trouvé ce qui suit:

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

jQuery.contains prend deux éléments DOM et vérifie si le premier contient le second.

Utiliser document.documentElementcomme premier argument remplit la sémantique de la existsméthode quand on veut l'appliquer uniquement pour vérifier l'existence d'un élément dans le document courant.

Ci-dessous, j'ai mis en place un extrait qui se compare jQuery.exists()aux approches $(sel)[0]et $(sel).lengthqui renvoient toutes les deuxtruthy valeurs pour $(4)tout $(4).exists()rendement false. Dans le contexte de la vérification de l'existence d'un élément dans le DOM, cela semble être le résultat souhaité .

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

Pas besoin de jQuery (solution de base)

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

Option beaucoup plus performante ci-dessous (remarquez l'absence d'un point avant une classe).

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector utilise un moteur de correspondance approprié comme $ () (sizzle) dans jQuery et utilise plus de puissance de calcul, mais dans 99% des cas, cela ira très bien. La deuxième option est plus explicite et indique exactement au code ce qu'il faut faire. C'est beaucoup plus rapide selon jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

J'aime simplement utiliser du javascript simple vanille pour ce faire.

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

Je suis tombé sur cette question et je voudrais partager un extrait de code que j'utilise actuellement:

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

Et maintenant je peux écrire du code comme ça -

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

Cela peut sembler beaucoup de code, mais lorsqu'il est écrit en CoffeeScript, il est assez petit:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

J'ai eu un cas où je voulais voir si un objet existe à l'intérieur d'un autre alors j'ai ajouté quelque chose à la première réponse pour vérifier s'il y avait un sélecteur à l'intérieur du sélecteur ..

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

Que diriez-vous:

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

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

C'est très minime et vous évite d'avoir à enfermer le sélecteur à $()chaque fois.

J'utilise ceci:

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

N'exécutez la chaîne que s'il existe un élément jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

Voici ma existméthode préférée dans jQuery

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

et une autre version qui prend en charge le rappel lorsque le sélecteur n'existe pas

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

Exemple:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

$("selector") renvoie un objet qui a la lengthpropriété. Si le sélecteur trouve des éléments, ils seront inclus dans l'objet. Donc, si vous vérifiez sa longueur, vous pouvez voir si des éléments existent. En JavaScript 0 == false, donc si vous n'obtenez pas 0votre code, il s'exécutera.

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

Voici l'exemple complet de différentes situations et de la façon de vérifier si l'élément existe en utilisant direct if on jQuery selector peut ou peut ne pas fonctionner car il retourne un tableau ou des éléments.

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

SOLUTION FINALE

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist

Vous n'avez pas à vérifier si c'est plus grand que 0comme $(selector).length > 0, $(selector).lengthc'est suffisant et une manière élégante de vérifier l'existence d'éléments. Je ne pense pas que cela vaille la peine d'écrire une fonction uniquement pour cela, si vous voulez faire plus de choses supplémentaires, oui.

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