jQuery - vérification de l'existence des éléments

Question

Ok donc, fondamentalement, j'ai besoin de vérifier, si dans mon menu #Container existent des éléments de troisième niveau (h3 pour être exact) et si oui leur donner un attribut. Si ce n'est pas le cas, donnez cet attribut à l'élément de second niveau (h2) qui existe toujours. Est:

if ($('h3')) { 
    //some attribute 
} else { 
//some attribute 
}; 

la bonne méthode?

Answer 1

Utilisez .length pour cela, il est 0/false s'il n'y a pas de matches:

if ($('h3').length) { 
//some attribute 
} else { 
//some attribute 
}; 

Version courte, moins lisible:

$($('h3').length ? 'h3' : 'h2').addClass("bob"); 

Answer 2

Vérifiez la longueur de l'objet jQuery retourné

if ($('h3').length != 0)) { 
    $('h3').attr(...); 
} 
else { 
    $('h2').attr(...); 
} 

Answer 3

.....

if ($('#Container h3').length) { 
    //some attribute 
} else { 
//some attribute 
}; 

Answer 4

Pour le rendre plus lisible, je vous propose cette tweak:

var h3ElementsExist = $('h3').length 
if (h3ElementsExist) { 
    //some attribute 
} else { 
//some attribute 
}; 

Answer 5

Je viens de réaliser une réponse que j'ai posté à cette fonction un moyen simple d'ajouter un plugin jQuery pour cela a été supprimé il y a longtemps. Pourquoi? Je ne sais pas. En conclusion, ele.length est simple, mais pas vraiment élégant quand on considère les défauts fondamentaux. Il ne conserve pas de balisage de style jQuery qui pourrait nuire à la lisibilité et forcer cela dans une instruction "if" quand cela "apparaît" comme quelque chose que jQuery devrait gérer "naturellement". C'est ainsi. Si tout ce que vous faites est d'appliquer un "attribut" à un élément existant, vous pouvez simplement faire l'appel, sans l'instruction if. Si l'élément existe, il aura le nouvel attribut. Si ce n'est pas le cas, cela ne nuira à rien et ne fera rien d'autre que de continuer.

Par exemple:

$('#Container h3').css('background', 'red'); 

Cela fera des H3 balises existantes dans un élément comme Container a identifié ont un fond red, si elles existent. S'ils n'existent pas, ce code sera essentiellement ignoré. Cependant, si vous voulez en faire plus, et maintenir jQuery "chainability" ainsi que maintenir le balisage de style jQuery, alors je suggère un plugin que j'ai écrit qui ajoute $.exist() à jQuery.

Il permet également de nombreuses manières d'appeler avec un paramètre pour les rappels. Autrement dit, vous pouvez l'utiliser dans une instruction if comme if ($('h3').exist() { ou vous pouvez créer des méthodes de rappel de 1 à 2. Les méthodes de rappel sont pures et simples. Si seulement 1 est fourni, (ou simplement la première méthode de rappel), il s'agit de la méthode de rappel " exist". En d'autres termes, si l'élément existe, il se déclenchera, puis retournera le (s) élément (s), maintenant ainsi jQuery "chainability". Cependant, s'il n'existe pas, rien ne se passera, sauf si il y a une deuxième méthode de rappel fournie.Ensuite, il lancera votre deuxième méthode de rappel, un peu comme le "sinon" de la déclaration if ci-dessus.

Quelques exemples ici:

$('#Container h3').exist(function(boolTrue, elements, indexPerEach) { /* DO WORK */ }); 

de 2 callbacks

$('#Container h3').exist(function(boolTrue, elements, indexPerEach) { /* DO WORK */ }, 
function(boolFalse, elements) { /* Elements did NOT EXIST - DO WORK */ }); 

Voir plus par exemple et obtenir la version minified du plug-in HERE

/*---PULIGIN---*/ 
;;(function($){$.exist||($.extend({exist:function(){var a,c,d;if(arguments.length)for(x in arguments)switch(typeof arguments[x]){case "function":"undefined"==typeof c?c=arguments[x]:d=arguments[x];break;case "object":if(arguments[x]instanceof jQuery)a=arguments[x];else{var b=arguments[x];for(y in b)"function"==typeof b[y]&&("undefined"==typeof c?c=b[y]:d=b[y]),"object"==typeof b[y]&&b[y]instanceof jQuery&&(a=b[y]),"string"==typeof b[y]&&(a=$(b[y]))}break;case "string":a=$(arguments[x])}if("function"==typeof c){var e=0<a.length?!0:!1;if(e)return a.each(function(b){c.apply(this,[e,a,b])});if("function"==typeof d)return d.apply(a,[e,a]),a}return 1>=a.length?0<a.length?!0:!1:a.length}}),$.fn.extend({exist:function(){var a=[$(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return $.exist.apply($,a)}}))})(jQuery); 
/*---PULIGIN---*/ 

Voir plus d'informations affiché à ce sujet sur une autre réponse HERE

Answer 6

Vérifiez la taille ou la longueur de l'objet jQuery retourné

if ($('h3').size() != 0)) { 
    $('h3').attr(...); 
} 
else { 
    $('h2').attr(...); 
} 

ou

if ($('h3').length != 0)) { 
    $('h3').attr(...); 
} 
else { 
    $('h2').attr(...); 
}