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?

2744
Jake McGraw 27 août 2008 à 23:49

30 réponses

Meilleure réponse

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

if ($(selector).length)

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

2456
Tim Büthe 17 oct. 2016 à 14:52

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.

L'utilisation de document.documentElement comme premier argument remplit la sémantique de la méthode exists lorsque nous voulons l'appliquer uniquement pour vérifier l'existence d'un élément dans le document courant.

Ci-dessous, j'ai rassemblé un extrait qui compare jQuery.exists() aux approches $(sel)[0] et $(sel).length qui renvoient toutes les deux truthy des valeurs pour $(4) tandis que {{X5} } renvoie 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>
26
Community 23 mai 2017 à 11:47

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
11
abhirathore2006 15 oct. 2016 à 07:10

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

26
Pawel 17 juil. 2019 à 14:43

Je vois que la plupart des réponses ici ne sont pas précises 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 toutes les conditions et renvoie 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
61
Alireza 17 juil. 2019 à 11:59

Vous pouvez utiliser:

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

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

66
Devon 17 sept. 2008 à 17:53

Vérification de l’existence de un élément est soigneusement documenté sur le site officiel de jQuery lui-même!

Utilisez la .length propriété 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 affichera l'élément s'il existe et ne fera rien (sans erreur) s'il ne le fait pas:

$("#myDiv").show();
34
Palec 10 sept. 2017 à 10:31

Ce plugin peut être utilisé dans une instruction if 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 les 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    */
    }
})
66
22 revs, 6 users 64% 12 juin 2016 à 09:10

Vous pouvez utiliser ceci:

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
136
Derek 朕會功夫 29 juin 2016 à 04:43

Voici ma méthode exist 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
    }
);
14
ducdhm 8 mars 2016 à 17:06

Vous pouvez utiliser ceci:

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

if($(selector).exists()){/*do something*/}
54
Bellash 15 mars 2016 à 07:46

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 voulez pas mettre d'ID dans l'élément, vous pouvez toujours utiliser une 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 ...

56
Peter Mortensen 10 mai 2013 à 07:48

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?...
}
31
Santiago Hernández 4 mai 2015 à 03:31

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;
};
19
jcreamer898 5 avril 2012 à 21:02

J'aime simplement utiliser du javascript plain vanilla pour ce faire.

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
25
Sanu Uthaiah Bollera 18 juin 2016 à 22:37

J'ai trouvé que if ($(selector).length) {} était insuffisant. Il cassera silencieusement votre application lorsque selector est un objet 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 de {}.

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.

Modifier: AVERTISSEMENT! Cela ne fonctionne pas dans IE lorsque selector est une chaîne.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
39
Oleg 7 févr. 2012 à 17:43

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
23
Eternal1 16 avril 2015 à 09:17

$("selector") renvoie un objet qui a la propriété length. 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 0 votre code s'exécutera.

if($("selector").length){
   //code in the case
} 
14
Hydrothermal 3 janv. 2019 à 10:00

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 du 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 non défini.

if ( $('#myDiv')[0] ) { /* Do something */ }
373
R3tep 30 juin 2015 à 08:09

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 undefined s'il n'y a aucun élément à l'index spécifié.

72
Salman A 18 janv. 2014 à 09:04

$.contains() est-ce ce que vous voulez?

jQuery.contains( container, contained )

La méthode $.contains() 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() renverra false.

Note : le premier argument doit être un élément DOM, pas un objet jQuery ou un objet JavaScript brut.

40
Mohammad 28 oct. 2018 à 09:57

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/

15
andy_314 1 août 2012 à 21:56

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

1353
Jake McGraw 13 févr. 2017 à 22:37

Que diriez-vous:

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

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

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

18
GSTAR 4 mars 2014 à 21:15

Essayez de tester l'élément DOM

if (!!$(selector)[0]) // do stuff
27
guest271314 9 août 2015 à 02:55

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

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

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

99
Randika Vishman 9 févr. 2019 à 03:48

La raison pour laquelle toutes les réponses précédentes nécessitent le paramètre .length 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'ensemble de l'arborescence DOM 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 ni utile et le code sera beaucoup plus rapide si vous utilisez directement document.querySelector(selector) à la 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 réellement 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);
43
technosaurus 13 août 2014 à 05:24

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
}
38
Ma'moun othman 20 févr. 2020 à 12:16
$(selector).length && //Do something
28
SJG 28 mai 2012 à 12:58

Vous n'avez pas à vérifier s'il est supérieur à 0 comme $(selector).length > 0, $(selector).length c'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
}
11
Andrei Todorut 20 juin 2017 à 09:43