Est-il "existe" pour jQuery?

Oui!

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

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

C'est en réponse à: l'Élevage du Code de podcast avec Jeff Atwood

si vous avez utilisé""

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

vous sous-entendez que l'enchaînement était possible alors qu'il ne l'est pas.

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. S'il n'y a pas de valeurs dans le tableau d'objets jQuery, alors obtenir le premier élément dans le tableau retournerait Non défini.

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

le moyen le plus rapide et le plus sémantiquement explicite de vérifier l'existence est en fait en utilisant JavaScript simple:

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

c'est un peu plus long à écrire que l'alternative jQuery length, mais s'exécute plus vite car c'est 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 à d'autres programmeurs l'impression que la fonction exists() est quelque chose d'inhérent à jQuery. JavaScript serait / devrait être compris par d'autres éditant votre code, sans augmentation de la dette de connaissances.

NB: notez l'absence d'un ' # ' avant l'élément_id (puisque c'est js simple, pas jQuery).

vous pouvez enregistrer quelques octets en écrivant:

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

cela fonctionne parce que chaque objet jQuery masque aussi comme un tableau, de sorte que nous pouvons utiliser l'opérateur dereferencing tableau pour obtenir le premier élément du tableau . Il retourne undefined s'il n'y a pas d'article à l'index spécifié.

vous pouvez utiliser:

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

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

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

Plugin

;;(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 feu si l'élément existe, le second feu si l'élément existe et non . Toutefois, si vous choisissez de passer une seule fonction, il se déclenche uniquement lorsque l' élément existe. Ainsi, la chaîne va mourir si l'élément sélectionné n'existe pas . Bien sûr, s'il existe, la première fonction va s'allumer et la chaîne va continuer.

gardez à l'esprit que l'utilisation de la variante de rappel aide à maintenir la possibilité d'enchaînement – l'élément est retourné et vous pouvez continuer à enchaî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    */
    }
})

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

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

si, pour une raison quelconque, vous ne voulez pas mettre d'id à l'élément, vous pouvez toujours utiliser n'importe quelle 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...

je vois la plupart des réponses ici sont pas précis comme ils devraient être, ils vérifient la longueur de l'élément, il 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érifient toutes les conditions et retourner la réponse comme elle devrait être:

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

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 paramètre .length est qu'ils utilisent principalement le sélecteur $() de jquery qui a un querySelectorAll derrière les rideaux (ou ils l'utilisent directement). Cette méthode est plutôt lente car elle doit analyser tout le DOM tree à la recherche de all correspond à ce sélecteur et alimenter un tableau avec eux.

le paramètre ['length'] n'est pas nécessaire ou utile et le code sera beaucoup plus rapide si vous utilisez directement document.querySelector(selector) à la place, parce qu'il renvoie le premier élément qu'il correspond ou nul 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 étant retourné; ce qui est bien si elle ne va pas être sauvée comme variable et utilisé de façon répétée (en gardant ainsi la référence autour 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 désiré. 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 juste avoir/stocker un vrai/faux, doublez simplement pas !! Ça marche pour les chaussures défaites, alors pourquoi faire un noeud 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);

j'ai trouvé if ($(selector).length) {} insuffisants. Il cassera silencieusement votre application quand selector est un objet vide {} .

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

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

ma seule suggestion est d'effectuer un contrôle supplémentaire pour {} .

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

je suis toujours à la recherche d'une meilleure solution, bien que celle-ci soit un peu lourde.

Edit: WARNING! cela ne fonctionne pas dans IE quand selector est un chaîne.

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

est $.contains() ce que vous voulez?

jQuery.contient( contenant, contenu )

The $.contient () la méthode retourne true si L'élément DOM fourni par le second argument est un descendant de L'élément DOM fourni par le premier argument, qu'il s'agisse d'un enfant direct ou plus profondément imbriqué. Sinon, elle retourne false. Seuls les noeuds d'élément sont supportés; si le second argument est un texte ou un commentaire nœud.$ ,contains() retournera false.

Note : le premier argument doit être un élément DOM, et non un objet jQuery ou un objet JavaScript simple.

vous pouvez vérifier l'élément est présent ou ne pas utiliser la longueur dans le script java. Si la longueur est supérieure à zéro, alors l'élément est présent si la longueur est égale à zéro alors 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
}

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

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

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

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

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

utilisez le .longueur propriété de la collection jQuery rendue par votre sélecteur:

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

noter qu'il n'est pas toujours nécessaire de vérifier si un élément existe. Le code suivant affichera l'élément s'il existe, et ne fera rien (sans erreurs) si elle n'est pas:

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

Essayer de tester pour DOM élément

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

Inspiré par hiway la réponse de je suis venu avec le texte suivant:

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

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

en utilisant document.documentElement comme premier argument remplit la sémantique de la méthode exists quand nous voulons l'appliquer uniquement pour vérifier l'existence d'un élément dans le document actuel.

ci-dessous, j'ai rassemblé un extrait qui compare jQuery.exists() avec les approches $(sel)[0] et $(sel).length qui renvoient toutes deux des valeurs truthy pour $(4) tandis que $(4).exists() renvoie false . Dans le contexte de vérifier 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>

j'aime juste utiliser le javascript simple vanille pour le faire.

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

j'ai eu un cas où je voulais voir si un objet existe à l'intérieur d'un autre donc j'ai ajouté quelque chose à la première réponse pour vérifier 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;
};

je suis tombé sur cette question et je voudrais partager un morceau 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");
});

il pourrait sembler beaucoup de code, mais quand écrit en Coffee-script il est tout à fait petit:

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

Que Diriez-vous de:

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

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

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

pas besoin de jQuery

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

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écute la chaîne que si un élément jQuery existe - http://jsfiddle.net/andres_314/vbNM3/2 /

Voici mon préféré exist méthode en 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 supporte 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" ) donnent un objet qui possède des données length . Si il y a des éléments que vous définissez dans le sélecteur, vous obtiendrez de l'objet. Donc, si vous vérifiez sa longueur, vous pouvez déjà trouver, y a-t-il un élément qui existe? En javascript 0 == false aussi null == false . Si vous n'obtenez pas 0 vos codes s'exécuteront.

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

if ( $('#myDiv').size() > 0 ) { //do something }

size() compte le nombre d'éléments retournés par le sélecteur

vous ne devez pas vérifier si elle est supérieure à 0 comme $(selector).length > 0 , $(selector).length c'est assez et une façon élégante de vérifier l'existence des éléments. Je ne pense pas que cela vaut la peine d'écrire une fonction uniquement pour ceci, 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
}