Comment puis-je détecter si un sélecteur renvoie null?

Quelle est la meilleure façon de détecter si un sélecteur jQuery renvoie un objet vide. Si tu fais:

alert($('#notAnElement'));

vous obtenez [object Object], donc la façon dont je le fais maintenant est la suivante:

alert($('#notAnElement').get(0));

qui écrira "indéfini", et vous pouvez donc vérifier cela. Mais cela semble très mauvais. De quelle autre manière existe-t-il?

Mon préféré est d'étendre jQuery avec cette petite commodité:

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

Utilisé comme:

$("#notAnElement").exists();

Plus explicite que l'utilisation de la longueur.

if ( $("#anid").length ) {
  alert("element(s) found")
} 
else {
  alert("nothing found")
}

Le sélecteur renvoie un tableau d'objets jQuery. Si aucun élément correspondant n'est trouvé, il renvoie un tableau vide. Vous pouvez vérifier la .lengthcollection retournée par le sélecteur ou vérifier si le premier élément du tableau n'est pas défini.

Vous pouvez utiliser l' un des exemples suivants dans une instruction IF et ils produisent tous le même résultat. Vrai, si le sélecteur a trouvé un élément correspondant, faux sinon.

$('#notAnElement').length > 0
$('#notAnElement').get(0) !== undefined
$('#notAnElement')[0] !== undefined

J'aime faire quelque chose comme ça:

$.fn.exists = function(){
    return this.length > 0 ? this : false;
}

Alors vous pouvez faire quelque chose comme ça:

var firstExistingElement = 
    $('#iDontExist').exists() ||      //<-returns false;
    $('#iExist').exists() ||          //<-gets assigned to the variable 
    $('#iExistAsWell').exists();      //<-never runs

firstExistingElement.doSomething();   //<-executes on #iExist

http://jsfiddle.net/vhbSG/

J'aime utiliser presence, inspiré de Ruby on Rails :

$.fn.presence = function () {
    return this.length !== 0 && this;
}

Votre exemple devient:

alert($('#notAnElement').presence() || "No object found");

Je le trouve supérieur à celui proposé $.fn.existscar vous pouvez toujours utiliser des opérateurs booléens ou if, mais le résultat véridique est plus utile. Un autre exemple:

$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem)
$ul.append('...')

Ma préférence, et je n'ai aucune idée pourquoi ce n'est pas déjà dans jQuery:

$.fn.orElse = function(elseFunction) {
  if (!this.length) {
    elseFunction();
  }
};

Utilisé comme ceci:

$('#notAnElement').each(function () {
  alert("Wrong, it is an element")
}).orElse(function() {
  alert("Yup, it's not an element")
});

Ou, comme il semble dans CoffeeScript:

$('#notAnElement').each ->
  alert "Wrong, it is an element"; return
.orElse ->
  alert "Yup, it's not an element"

C'est dans la documentation JQuery:

http://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

  alert( $( "#notAnElement" ).length ? 'Not null' : 'Null' );

Vous voudrez peut-être faire cela tout le temps par défaut. J'ai eu du mal à encapsuler la fonction jquery ou la méthode jquery.fn.init pour le faire sans erreur, mais vous pouvez apporter une modification simple à la source jquery pour ce faire. Vous y trouverez quelques lignes environnantes que vous pouvez rechercher. Je recommande de rechercher la source jquery pourThe jQuery object is actually just the init constructor 'enhanced'

var
  version = "3.3.1",

  // Define a local copy of jQuery
  jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    var result = new jQuery.fn.init( selector, context );
    if ( result.length === 0 ) {
      if (window.console && console.warn && context !== 'failsafe') {
        if (selector != null) {
          console.warn(
            new Error('$(\''+selector+'\') selected nothing. Do $(sel, "failsafe") to silence warning. Context:'+context)
          );
        }
      }
    }
    return result;
  },

  // Support: Android <=4.0 only
  // Make sure we trim BOM and NBSP
  rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

jQuery.fn = jQuery.prototype = {

Enfin, vous pouvez obtenir le code source jquery non compressé ici: http://code.jquery.com/