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




jquery wiki (20)

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 déclenchera si l'élément existe, le second déclenchera si l'élément n'existe pas . Toutefois, si vous choisissez de ne transmettre qu'une seule fonction, elle ne sera déclenchée que lorsque l'élément existe. Ainsi, la chaîne mourra si l'élément sélectionné n'existe pas . Bien sûr, si elle existe, la première fonction sera déclenchée 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 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    */
    }
})

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

Le code actuel que j'ai est celui-ci:

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

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


En JavaScript, tout est "vérité" ou "fausseté", et pour les nombres 0 (et NaN) signifie false , tout le reste est true . Pour que vous puissiez écrire:

if ($(selector).length)

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


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

jQuery.contains( container, contained )

La $.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 s'agisse d'un enfant direct ou imbriqué plus profondément. Sinon, il retourne faux. Seuls les nœuds d'élément sont pris en charge. si le deuxième argument est un noeud de texte ou de commentaire, $.contains() retournera false.

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


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 souhaitez pas attribuer d'identifiant à 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 pur JavaScript tomber dans l'oubli ...


J'ai trouvé if ($(selector).length) {} être insuffisant. Il va casser votre application en silence lorsque le 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 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: ATTENTION! Cela ne fonctionne pas dans IE lorsque selector est une chaîne.

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

J'aime juste utiliser javascript plain vanilla pour le faire.

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

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/


Je suis tombé par hasard sur cette question et j'aimerais 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 un code comme celui-ci -

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

La manière la plus rapide et la plus sémantique de vérifier l'existence existe en utilisant du JavaScript pur:

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 puisqu'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 énoncées par @snover. Mais cela donnerait aussi aux autres programmeurs l'impression que la fonction exist () est inhérente à jQuery. JavaScript devrait / devrait être compris par d’autres personnes modifiant votre code, sans augmentation de la dette liée aux connaissances.

NB: Notez l'absence de '#' avant element_id (puisqu'il s'agit de JS simple, pas de jQuery).


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 qu’ils l’utilisent directement). Cette méthode est plutôt lente car elle doit analyser l'ensemble de l'arborescence DOM à la recherche de toutes les correspondances avec ce sélecteur et remplir un tableau avec celles-ci.

Le paramètre ['length'] n'est ni utile ni utile et le code sera beaucoup plus rapide si vous utilisez directement 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 retourné; ce qui est bien si cela ne va pas être enregistré en tant que variable et utilisé à plusieurs reprises (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 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 un vrai / faux, doublez-le! Cela fonctionne pour les chaussures déliées, 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);

Pas besoin de jQuery

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

Que diriez-vous:

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

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

C'est très minime et vous évite de mettre le sélecteur entre $() chaque fois.


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 autre version prenant 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
    }
);

Vous n'avez pas à vérifier si elle est supérieure à 0 comme $(selector).length > 0 , $(selector).length est suffisant et un moyen élégant 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 en plus, oui.

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

Vous pouvez utiliser ceci:

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

Vous pouvez utiliser ceci:

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

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

Vous pouvez vérifier si l'élément est présent ou non en utilisant 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 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
}

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

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

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

$("selector" ) donne un objet qui a des données de length . S'il y a des éléments que vous définissez dans le sélecteur, vous les obtiendrez de l'objet. Donc, si vous vérifiez sa longueur que vous pouvez déjà trouver, existe-t-il un élément? En javascript 0 == false également null == false . Si vous n'obtenez pas 0 vos codes seront exécutés.

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

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




jquery