52 votes

Attacher un événement à plusieurs éléments en une seule fois

Disons que j'ai les éléments suivants :

var a = $("#a");
var b = $("#b");

//I want to do something as such as the following : 

$(a,b).click(function () {/* */}); // <= does not work

//instead of attaching the handler to each one separately

Évidemment, ce qui précède ne fonctionne pas parce que dans le $ le deuxième argument est le context et non un autre élément.

Alors comment puis-je attacher l'événement aux deux éléments en une seule fois ?


[Mise à jour]

peirix a posté un extrait intéressant dans lequel il combine des éléments avec les & Mais j'ai remarqué quelque chose :

$(a & b).click(function () { /* */ }); // <= works (event is attached to both)

$(a & b).attr("disabled", true); // <= doesn't work (nothing happens)

D'après ce que vous pouvez voir ci-dessus, apparemment, la combinaison avec le & Le signe ne fonctionne que lorsque l'on joint des événements... ?

88voto

Gareth Points 42402

El Méthode d'ajout jQuery est ce que vous voulez :

Ajoute d'autres éléments, correspondant à l'expression donnée, à l'ensemble des éléments correspondants.

var a = $("#a");
var b = $("#b");
var combined = a.add(b)

38voto

hobbs Points 71946

N'oubliez pas non plus que les sélecteurs jQuery prennent en charge la syntaxe de la virgule CSS. Si vous avez besoin de combiner deux collections arbitraires, les suggestions de tout le monde sont bonnes, mais si c'est aussi simple que de faire quelque chose à des éléments avec des identifiants a y b utiliser $('#a,#b') .

16voto

The Brawny Man Points 447

Cette question a déjà reçu une réponse, mais je pense qu'un moyen plus simple et plus rationnel d'atteindre le même objectif serait de s'appuyer sur les similitudes entre le modèle de sélecteur de jQuery et celui de CSS et de se contenter de faire :

$("#a, #b").click(function () {/* */});

Je l'utilise fréquemment et je n'ai jamais vu qu'elle ne fonctionnait pas (je ne peux pas parler pour les versions de jQuery antérieures à 1.3.2 car je ne l'ai pas testée). J'espère que cela aidera quelqu'un un jour.


UPDATE : Je viens de relire le fil de discussion, et j'ai manqué le commentaire que vous avez fait sur le fait d'avoir les nœuds en question déjà enregistrés dans des variables, mais cette approche fonctionnera toujours, avec une petite modification que vous voudrez faire :

var a = $("#a");
var b = $("#b");
$(a.selector+", "+b.selector).click(function () {/* */});

L'une des choses intéressantes que fait jquery est qu'il ajoute quelques propriétés spécifiques à jquery au nœud qu'il renvoie (selector, qui est le sélecteur original utilisé pour saisir ce nœud, est l'une d'entre elles). Vous pouvez rencontrer des problèmes avec cela si le sélecteur que vous avez utilisé contient déjà des virgules. On peut aussi se demander si c'est plus facile que d'utiliser simplement add, mais c'est un exemple amusant de la façon dont jquery peut être cool :).

8voto

Greg Points 132247

Vous pourriez simplement les mettre dans un tableau :

$.each([a, b], function()
{
    this.click(function () { });
});

4voto

Andrey Borisko Points 767

Pourquoi n'utilisez-vous pas un tableau ? Cela fonctionne de mon côté :

$([item1, item2]).on('click', function() {
      // your logic
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X