Existe-t-il une fonction «existe» pour jQuery?


2778

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?

Réponses:


2490

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.


52
@ abhirathore2006 Si vous utilisez un sélecteur d'ID et que l'élément n'existe pas, la longueur est 0 et ne lève pas d'exceptions.
Robert

14
Assez intéressant NaN != false.
Robert

35
@Robert et [] + []= ""... ahh j'aime javascript
James

9
@James C'est parce que [].toString() === [].join(',') === ""et "" === "".
Ismael Miguel

5
@Robert ettypeof NaN == 'number'
oriadam

1356

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


254
J'écris juste: if ($ (selector) .length) {...} sans le '> 0'
vsync

369
Votre $.fn.existsexemple remplace une recherche de propriété (bon marché!) Par deux appels de fonction, qui sont beaucoup plus chers - et l'un de ces appels de fonction recrée un objet jQuery que vous avez déjà, ce qui est tout simplement stupide.
C Snover

212
@redsquare: la lisibilité du code est la meilleure justification pour ajouter ce type de fonction sur jQuery. Le fait d'avoir quelque chose appelé .existslit proprement, alors qu'il se .lengthlit comme quelque chose de sémantiquement différent, même si la sémantique coïncide avec un résultat identique.
Ben Zotto

48
@quixoto, désolé mais .length est une norme dans de nombreuses langues qui n'a pas besoin d'être encapsulée. Sinon, comment interprétez-vous .longueur?
redsquare

144
À mon avis, c'est au moins une indirection logique du concept de "longueur de liste supérieure à zéro" au concept de "l'élément (s) pour lequel j'ai écrit un sélecteur d'exister". Oui, c'est techniquement la même chose, mais l'abstraction conceptuelle est à un niveau différent. Certaines personnes préfèrent donc un indicateur plus explicite, même à un certain coût de performance.
Ben Zotto

377

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

11
La première méthode se lit mieux. $ ("a"). exist () se lit comme "si <a> des éléments existent." $ .exists ("a") se lit comme "s'il existe des <a> éléments".
strager le

16
vrai mais encore une fois, vous sous-entendez que le chaînage est possible et si j'essayais de faire quelque chose comme $ (selector) .exists (). css ("color", "red") ça ne marcherait pas et alors je serais = * (
Jon Erickson

19
Il existe déjà des méthodes qui ne peuvent pas être chaînées, comme attr et les fonctions de données. Je vois votre point cependant et, pour ce que ça vaut, je teste juste la longueur> 0 de toute façon.
Matthew Crumley

39
Pourquoi diable auriez-vous besoin de chaîner cela? $(".missing").css("color", "red")fait déjà la bonne chose… (c.-à-d. rien)
Ben Blank

15
Le truc sur le chaînage est complet - il existe de nombreuses$.fn méthodes jQuery qui retournent autre chose qu'un nouvel objet jQuery et donc ne chaînent pas.
Alnitak

136

Vous pouvez utiliser ceci:

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

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

134
Vous n'avez pas vu que Tim Büthe avait déjà donné cette réponse 2 ans avant vous?
Th4t Guy

101
Pfft, Tim n'a jamais montré comment tester si l'élément n'existe pas.
Jeremy W

1
Tu veux dire la vie "autrement"? Mon Q est le suivant: euh, il doit exister ou le sélecteur ne correspond pas. La longueur est superflue.
RichieHH

26
cette réponse et ces commentaires
résument le

101

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


56
Ce n'est pas du tout la même chose. Les sélecteurs JQuery peuvent être utilisés pour n'importe quelle règle CSS, par exemple $('#foo a.special'). Et il peut renvoyer plus d'un élément. getElementByIdne peut pas commencer à approcher cela.
kikito

7
Vous avez raison en ce qu'elle n'est pas aussi largement applicable que les sélecteurs. Cependant, il fait assez bien le travail dans le cas le plus courant (vérifier s'il existe un seul élément). Les arguments d'auto-explication et de vitesse sont toujours d'actualité.
Magne

29
@Noz if(document.querySelector("#foo a.special"))fonctionnerait. Aucun jQuery nécessaire.
Blue Skies

34
L'argument de la vitesse dans les moteurs JS n'est mort que dans l'esprit des gens qui ne peuvent pas fonctionner sans jQuery, car c'est un argument qu'ils ne peuvent pas gagner.
Blue Skies

22
Vous vous souvenez du bon vieux temps où document.getElementById était tout ce que nous avions? Et j'ai toujours oublié le document. et ne pouvait pas comprendre pourquoi cela ne fonctionnait pas. Et je l'ai toujours mal orthographié et j'ai mal interprété le boîtier du personnage.
JustJohn

73

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


1
Je suis venu ici pour poster cette réponse exacte ... violon obligatoire: jsfiddle.net/jasonwilczak/ekjj80gy/2
JasonWilczak

3
@JasonWilczak Voulez-vous commenter pourquoi pas à la place: .eq [0] ou .first () pour faire référence à un premier élément trouvé plutôt que de type casting?
Jean Paul AKA el_vete

5
Non, jQuery.first()ou les jQuery.eq(0)deux retournent des objets, les objets sont véridiques même s'ils sont vides. Cet exemple devrait illustrer pourquoi ces fonctions ne peuvent pas être utilisées telles if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
Salman A

1
Correct. .eq(0)renvoie juste un autre objet jQuery tronqué à la longueur 1 ou 0. .first()est juste une méthode pratique pour .eq(0). Mais .get(0)renvoie le premier élément DOM ou undefinedet est identique à [0]. Le premier élément DOM d'un objet jQuery est stocké dans la propriété d'objet standard avec le nom '0'. C'est un simple accès à la propriété. La seule conversion de type découle de la conversion implicite du nombre 0en chaîne '0'. Donc, si la conversion de type est un problème, vous pouvez utiliser à la $.find(selector)['0']place.
Robert

66

Vous pouvez utiliser:

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

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


38
C'est trop pour une chose aussi simple. voir la réponse de Tim Büthe
vsync

Ceci est la bonne réponse. La méthode 'length' a le problème qu'elle donne un faux positif avec n'importe quel nombre, par exemple: $ (666) .length // renvoie 1, mais ce n'est pas un sélecteur valide
Earnaz

C'est extrêmement cher pour une tâche très simple. Regardez simplement l'implémentation de jquery si .is () et vous verrez combien de code il a besoin de traiter pour vous répondre à cette question simple. De plus, ce que vous voulez faire n'est pas évident, c'est donc la même solution ou peut-être moins élégante que la solution en question.
micropro.cz

1
@earnaz grand point, belle prise. Je ne vois pas où c'est réellement une préoccupation valable, cependant. Les développeurs qui identifient des éléments 666ont probablement de nombreuses autres raisons pour lesquelles leur code est cassé. Bien qu'il s'agisse d'un sélecteur non valide, $ (666) .length est un javascript valide : il est évalué comme véridique et doit donc satisfaire à la condition.
Todd

@earnaz pour éviter ce cas spécifique, $.find(666).lengthfonctionne.
Emile Bergeron

66

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

1
Sur la version de rappel, le Has Itemsrappel ne doit-il pas réellement passer l'objet comme argument?
Chris Marisic

62

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

55

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


5
Je sais: il ne répond pas directement à la question d'origine (qui demande une fonction jquery), mais dans ce cas, la réponse serait "Non" ou "pas une solution sémantiquement correcte".
amypellegrini

Et si vous avez besoin d'un sélecteur de parents :has()?
Константин Ван

54

Vous pouvez utiliser ceci:

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

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

43

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

40

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.


3
Cela n'accepte pas un sélecteur, ce qui signifie qu'il devrait le sélectionner, ce qui signifie qu'il pourrait simplement vérifier le résultat de sa sélection.

39

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

12
À quelle fréquence vous trouvez-vous en train $()d' appeler avec un objet vide comme argument?
nnnnnn

@nnnnnn En fait jamais (je n'utilise plus jQuery). Mais je suppose qu'il y a 3 ans, j'ai eu à exposer une API qui prendrait un sélecteur et retournerait le nombre d'éléments pour ce sélecteur. Si un autre développeur passait dans un objet vide, il répondrait incorrectement avec 1.
Oleg

3
Pourquoi diable voulez - vous passer un objet vide {}à $()?
Tous les travailleurs sont essentiels du

7
@cpburnz pourquoi me demandez-vous? Je n'étais qu'un fournisseur d'API ... Les gens transmettent toutes sortes de choses stupides aux API.
Oleg

4
Je viens de remarquer que le fil de discussion jquery référencé par @FagnerBrack a été mis à jour peu de temps après son commentaire; on dirait que ça ne va pas disparaître après tout.
Joseph Gabriel

38

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
}

4
Vous n'avez pas besoin de vérifier que la longueur du temps est supérieure à 0, si ($ ('# elementid'). Length) {} sera suffisant.
Pranav Labhe

13
Avez-vous réellement lu la question? C'est exactement la même méthode qu'OP utilise.
A1rPun

34

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

31

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?...
}

2
Parce que Boolean(x)peut parfois être plus efficace.

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

19
Je déteste ces façons intelligentes d'éviter d'utiliser un ifoù un ifaméliorerait la lisibilité au prix de 2 octets.
Emile Bergeron

De plus, les minificateurs feront tout cela &&pour vous.

27

Essayez de tester l' DOMélément

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

27

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


26

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


25

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

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

23

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

9
Je trouve l'approche originale d'OP non seulement beaucoup plus minimale mais aussi plus élégante que cela. Il semble exagéré d'écrire autant de code lorsque la méthode OP est plus courte et n'implique pas de rappels.
Lev

Pour les cas simples - vous avez raison. Mais pour les situations plus complexes impliquant beaucoup de code dans les deux cas, je pense que mon approche est meilleure.
Eternal1

4
Dans quelle situation complexe cette approche serait-elle meilleure qu'une simple déclaration if / else?
Jarvl

19

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

18

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.


3
Cela se lit comme "s'il existe une chose" au lieu de "si une chose existe" qui se if($("#thing").exists(){}lit comme. De plus, ce n'est pas la manière jQuery.
1j01

15

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/


14

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

14

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

5
"donne un tableau" - Non, ce n'est pas le cas. Il vous donne un objet jQuery (qui partage certaines propriétés avec un tableau). Votre réponse est essentiellement la même que celle de Tim Büthe de 2009.
Quentin

11

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 pouvez essayer $ ("# xysyxxs") dans votre débogueur, vous verrez que jquery ne retourne pas null ou indéfini. Donc la solution finale ne fonctionnerait pas
Béranger

11

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
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.