Comment vérifier la page DOM lors de l'association d'événements jQuery/javascript à des éléments?

Question

J'utilise jQuery pour ajouter des événements aux éléments DOM. En faisant ceci, j'utilise souvent des sélecteurs qui pourraient techniquement rassembler une liste d'articles assortis plutôt qu'un seul. par exemple. en utilisant les méthodes .children() et .find(), j'ai pu trouver 0, 1 ou plusieurs éléments DOM correspondants. Est-ce que je dois simplement vérifier .size() == 1 sur chaque élément que j'attache des événements, ou est-ce qu'il y a une manière plus simple de faire ceci, par exemple. un sélecteur avec une colonne de correspondances attendues qui échoue si ce nombre attendu n'est pas égal à la taille? Il semble stupide, je suppose, étant donné que je produis également le HTML et devrait connaître la bonne réponse, mais j'ai beaucoup de manipulations DOM en cours et je me demandais s'il y a un mécanisme de vérification de la santé intégré ou non.

Answer 1

Vous pouvez écrire une méthode simple d'extension pour faire ce que vous voulez, comme ceci:

jQuery.fn.ifCount = function(count) { 
    return this.length === count ? this : $(); 
}; 

Puis dans votre code au lieu d'un if chaque fois, vous pouvez simplement appeler cela dans la chaîne, par exemple:

$("div").ifCount(2).css({ color: 'red' }); 

Si le compte est 2, l'ensemble s'exerce et .css() fonctionne sur les éléments. Si le compte est tout sauf 2, un nouveau vide est retourné, donc le .css() ne fonctionne sur rien.

---

Si vous voulez lier simplement à un certain nombre d'éléments et ne se soucient pas combien, il n'est pas nécessaire de vérifier quoi que ce soit, vous pouvez simplement faire:

$("div").click(function() { .... }); 

Cela fonctionne s'il y a 0, 1 ou 400 <div> éléments, cela n'a pas d'importance.Le comportement par défaut de jQuery est de simplement continuer la chaîne avec les éléments correspondants ... s'il y a 0 les fonctions de la chaîne ne s'exécutent simplement sur aucun élément, mais ne lance pas une erreur. Ce n'est pas spécifique aux gestionnaires d'événements, cela fonctionne avec n'importe quel code jQuery (et les plugins écrits correctement).

Answer 2

Vous n'avez pas besoin de les vérifier. Utilisez simplement la méthode et appelez bind. Si elle retourne un ou plusieurs éléments tous les éléments auront l'événement lié. S'il ne renvoie aucun élément, il ne lancera aucune erreur non plus.

Answer 3

Vous pouvez placer la sélection dans une variable locale puis tester la taille:

var items = $(".items"); 

if (items.length == 1) { 
    // Do you regular stuff here 
} else if (items.length > 1) { 
    // Log error to the console 
    // Example: console.log('Too Many Items!!'); <- with firebug ofcourse 
} else { 
    // console.log("Too Few Items"); 
} 

Vous pouvez enregistrer l'erreur sur la console mais corriger le problème pour excution plus de code en faisant ceci:

console.log('Too Many Items!!'); 
items = items.first(); 

Answer 4

Je pense que vous devriez concevoir un sélecteur pour répondre à vos besoins. Si l'objectif est de choisir un élément - utilisez le sélecteur d'identifiant ou ceux qui renvoient un élément ou zéro $ ("#"). Cliquez sur (function_callback), si vous en avez besoin, utilisez d'autres sélecteurs. Quoi qu'il en soit, lorsque vous attachez des événements de manière jQuery $ ("") .clic (ou un autre événement), vous déclarez que tous les éléments qui correspondent à la condition du sélecteur sont souscrits à l'événement.

Answer 5

Généralement, vous pouvez appliquer des fonctions à la fois: $ ("..."). Someting();

Vous pouvez aussi essayer: $ ("...") chaque (function() {$ (ce) .quelquechose();} );.