Sélectionner l'élément courant en jQuery

Question

J'ai un code HTML comme celui-ci :

<div>
       <a>Link A1</a>
       <a>Link A2</a>
       <a>Link A3</a>
</div>

<div>
       <a>Link B1</a>
       <a>Link B2</a>
       <a>Link B3</a>
</div>

Lorsque l'utilisateur clique sur un lien dans le code HTML ci-dessus, je veux obtenir l'objet jQuery du lien correspondant. <a> puis manipuler son frère ou sa sœur. Je ne vois pas d'autre moyen que de créer un identifiant pour chaque élément <a> et de transmettre cet identifiant à un gestionnaire d'événement onclick. Je ne veux vraiment pas utiliser d'ID.

Des suggestions ?

Answer 1

Heureusement, les sélecteurs jQuery vous laissent beaucoup plus de liberté :

$("div a").click( function(event)
{
   var clicked = $(this); // jQuery wrapper for clicked element
   // ... click-specific code goes here ...
});

...attachera le callback spécifié à chaque <a> contenu dans un <div> .

Answer 2

Lorsque l'événement de clic de jQuery appelle votre gestionnaire d'événement, il définit "this" comme l'objet sur lequel on a cliqué. Pour le transformer en un objet jQuery, il suffit de le passer à la fonction "$" : $(this) . Ainsi, pour obtenir, par exemple, l'élément frère suivant, vous devez effectuer cette opération dans le gestionnaire de clic :

var nextSibling = $(this).next();

Edit : Après avoir lu le commentaire de Kevin, j'ai réalisé que je me suis peut-être trompé sur ce que vous voulez. Si vous voulez faire ce qu'il a demandé, c'est-à-dire sélectionner le lien correspondant dans l'autre div, vous pourriez utiliser $(this).index() pour obtenir la position du lien cliqué. Vous pouvez ensuite sélectionner le lien dans l'autre div en fonction de sa position, par exemple avec la méthode "eq".

var $clicked = $(this);
var linkIndex = $clicked.index();
$clicked.parent().next().children().eq(linkIndex);

Si vous voulez pouvoir aller dans les deux sens, vous devrez trouver un moyen de déterminer dans quelle division vous vous trouvez pour savoir si vous avez besoin de "next()" ou "prev()" après "parent()".

Answer 3

Vous trouverez le frères et sœurs() y parent() méthodes utiles ici.

// assuming A1 is clicked
$('div a').click(function(e) {
    $(this); // A1
    $(this).parent(); // the div containing A1
    $(this).siblings(); // A2 and A3
});

En combinant ces méthodes avec etSelf() vous permettra de manipuler toute combinaison de ces éléments que vous souhaitez.

Edit : Le commentaire laissé par Mark concernant la délégation d'événements sur la réponse de Shog9 est très bon. La façon la plus simple d'accomplir ceci dans jQuery serait d'utiliser la fonction live() méthode.

// assuming A1 is clicked
$('div a').live('click', function(e) {
    $(this); // A1
    $(this).parent(); // the div containing A1
    $(this).siblings(); // A2 and A3
});

Je pense qu'il lie en fait l'événement à l'élément Root, mais l'effet est le même. Non seulement c'est plus flexible, mais cela améliore aussi les performances dans de nombreux cas. Veillez simplement à lire la documentation pour éviter tout problème.

Answer 4

Je pense qu'en combinant .children() con $(this) retournera uniquement les enfants de l'élément sélectionné

Considérez les points suivants :

$("div li").click(function() {
$(this).children().css('background','red');
});

ceci changera le fond du li cliqué seulement

Answer 5

Pour sélectionner le frère ou la sœur, il faudrait quelque chose comme :

$(this).next();

Donc, le commentaire de Shog9 n'est pas correct. Tout d'abord, vous devez nommer la variable "clicked" en dehors de la fonction div click, sinon elle est perdue après le clic.

var clicked;

$("div a").click(function(){
   clicked = $(this).next();
   // Do what you need to do to the newly defined click here
});

// But you can also access the "clicked" element here