Existe-t-il une fonction « existe » pour jQuery ?
https://stackoverflow.com/questions/31044
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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 ?
La solution
En JavaScript, tout est « vrai » ou « faux », et pour les nombres 0 (et NaN) signifie false, tout le reste true.Vous pourriez donc écrire :
if ($(selector).length)
Tu n'as pas besoin de ça >0 partie.
Autres conseils
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
Si vous avez utilisé
jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }
vous laisseriez entendre 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, de la FAQ:
if ( $('#myDiv').length ) { /* Do something */ }
Vous pouvez également utiliser ce qui suit.S'il n'y a aucune valeur dans le tableau d'objets jQuery, l'obtention du premier élément du tableau renverrait un résultat indé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 */ }
La manière la plus rapide et la plus sémantiquement explicite de vérifier l'existence consiste en fait à utiliser le langage simple 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 puisqu'il s'agit d'une méthode JS native.
Et c'est mieux que l'alternative d'écrire le vôtre jQuery fonction.Cette alternative est plus lente, pour les raisons indiquées par @snover.Mais cela donnerait aussi à d'autres programmeurs l'impression que le exists() la fonction est quelque chose d'inhérent à jQuery. JavaScript serait/devrait être compris par les autres qui modifient votre code, sans augmentation de la dette de connaissances.
Attention : Notez l'absence de « # » avant le element_id (puisqu'il s'agit simplement de JS, pas jQuery).
Vous pouvez économiser quelques octets en écrivant :
if ($(selector)[0]) { ... }
Cela fonctionne parce que 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 revient undefined s'il n'y a aucun élément à 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 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);
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 existe pas exister.Cependant, si vous choisissez de transmettre une seule fonction, elle ne se déclenchera que lorsque l'élément existe.Ainsi, la chaîne mourra si l'élément sélectionné ne pas exister.Bien sûr, si elle existe, la première fonction se déclenchera et la chaîne continuera.
Gardez à l'esprit qu'en utilisant le la variante de rappel aide à maintenir la chaînabilité – l’élément est renvoyé et vous pouvez continuer à enchaîner les commandes comme avec n’importe quelle 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 */
}
})
Je vois que la plupart des réponses ici sont pas précis comme ils devraient l'être, ils vérifient la longueur de l'élément, cela peut être D'ACCORD dans de nombreux cas, mais pas à 100%, imaginez si le nombre passe à la fonction à la place, je prototype donc une fonction qui vérifie toutes les conditions et renvoie la réponse telle qu'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. 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
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 attribuer d'identifiant à 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...
Vous pourriez 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 .length Le paramètre est qu'ils utilisent principalement jquery $() sélecteur qui a querySelectorAll derrière les rideaux (ou ils l'utilisent directement).Cette méthode est plutôt lente car elle doit analyser l'intégralité de l'arborescence DOM à la recherche de tous correspond à ce sélecteur et remplit un tableau avec eux.
Le paramètre ['length'] n'est ni 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 renvoyé ;ce qui est bien s'il ne doit pas être enregistré en tant que variable et utilisé à plusieurs reprises (gardant ainsi la référence si nous l'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 souhaitez obtenir/stocker juste un vrai/faux, ne le doublez pas !!Cela fonctionne pour les chaussures qui sont dénouées, alors pourquoi faire un nœud 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) {} être insuffisante.Cela brisera 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 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.
Modifier: AVERTISSEMENT! Cela ne fonctionne pas dans IE lorsque selector est une chaîne.
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
Est $.contains() ce que tu veux?
jQuery.contains( container, contained )Le
$.contains()La 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 s'agisse d'un enfant direct ou imbriqué plus profondément.Sinon, il renvoie faux.Seuls les nœuds d'éléments sont pris en charge ;si le deuxième argument est un nœud de texte ou de commentaire,$.contains()renverra faux.Note:Le premier argument doit être un élément DOM, et non un objet jQuery ou un simple objet JavaScript.
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 nul, 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
}
Vérifier l'existence d'un élément est soigneusement documenté sur le site officiel de jQuery lui-même !
Utilisez le .longueur propriété de la collection jQuery renvoyé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 erreurs) si ce n'est pas le cas:
$("#myDiv").show();
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).length && //Do something
Essayez de tester pour DOM élément
if (!!$(selector)[0]) // do stuff
Inspiré par réponse de Highway J'ai trouvé ce qui suit :
$.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 car le premier argument remplit la sémantique du exists lorsque 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() contre la $(sel)[0] et $(sel).length approches qui renvoient toutes deux truthy valeurs pour $(4) alors que $(4).exists() Retour false.Dans le contexte de vérifier l'existence d'un élément dans le DOM, cela semble être le résultat désiré.
$.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 du javascript vanille pour ce faire.
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
Pas besoin de jQuery
if(document.querySelector('.a-class')) {
// do something
}
Je suis tombé 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 du 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
J'ai eu un cas où je voulais voir si un objet existe à l'intérieur d'un autre, j'ai donc ajouté quelque chose à la première réponse pour vérifier la présence d'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;
};
Que diriez-vous:
function exists(selector) {
return $(selector).length;
}
if (exists(selector)) {
// do something
}
C'est très minime et vous évite d'avoir à joindre le sélecteur avec $() à chaque fois.
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')});
}
);
Exécutez la chaîne uniquement si un élément jQuery existe - http://jsfiddle.net/andres_314/vbNM3/2/
Voici mon préféré exist méthode 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 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
}
);
$("selector") renvoie un objet qui a le length proprié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 0 votre code s'exécutera.
if($("selector").length){
//code in the case
}
Voici l'exemple complet de différentes situations et de la façon de vérifier si l'élément existe en utilisant directement le sélecteur if on jQuery peut ou non fonctionner car il renvoie 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 n'êtes pas obligé de vérifier s'il est supérieur à 0 comme $(selector).length > 0, $(selector).length c'est une manière suffisante et élégante de vérifier l'existence d'éléments.Je ne pense pas que cela vaut 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
}
