Seleccionar elemento actual de jQuery

Question

tengo código HTML siguiente manera:

<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> 

Cuando el usuario hace clic en un enlace desde arriba HTML, quiero conseguir el objeto jQuery del <a> elemento correspondiente, y luego manipular a su hermano. No se me ocurre otra manera que crear una ID para cada elemento <a>, y pasar esa ID a un controlador de eventos onclick. Realmente no quiero usar IDs.

¿Alguna sugerencia?

Answer 1

Afortunadamente, los selectores de jQuery que permite mucha más libertad:

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

... adjuntará la devolución de llamada especificada a cada <a> contenida en un <div>.

Answer 2

Cuando el evento de clic de jQuery llama a su controlador de eventos, establece "esto" para el objeto que se hizo clic en. Para convertirlo en un objeto jQuery, simplemente páselo a la función "$": $(this). Por lo tanto, para obtener, por ejemplo, el siguiente elemento hermano, que haría esto dentro del controlador de clic:

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

Editar: Después de leer el comentario de Kevin, me di cuenta de que podría ser confundido sobre lo que quiere. Si desea hacer lo que pidió, es decir, seleccionar el enlace correspondiente en el otro div, puede usar $(this).index() para obtener la posición del enlace en el que se hizo clic. Luego seleccionarías el enlace en el otro div por su posición, por ejemplo con el método "eq".

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

Si usted quiere ser capaz de ir en ambos sentidos, se necesita algún modo de determinar qué div usted está en para que sepa si es necesario "next()" o "prev()" después de "padre()"

Answer 3

Para seleccionar el hermano, que había necesidad de algo así como:

$(this).next(); 

Así, el comentario de Shog9 no es correcto. En primer lugar, debe nombrar la variable "clic" fuera de la función de clic div, de lo contrario, se pierde después de que se produce el 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 

Answer 4

Va a encontrar los métodos siblings() y parent() útil aquí.

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

Combinando estos métodos con andSelf() le permitirá manipular cualquier combinación de esos elementos que desee.

Editar: El comentario dejado por Mark con respecto a la delegación de eventos en la respuesta de Shog9 es muy bueno. La forma más sencilla de lograr esto en jQuery sería utilizando el método live().

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

Creo que realmente une el evento al elemento raíz, pero el efecto es el mismo. No solo es más flexible, sino que también mejora el rendimiento en muchos casos. Solo asegúrese de leer la documentación para evitar cualquier problema.

Answer 5

Creo que combinando .niños() con $ (this) volverán los hijos del elemento seleccionado solamente

considerar lo siguiente:

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

esto va a cambiar el fondo de la li clic única