在jQuery中选择当前元素

Question

I have HTML code like this :

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

When user clicks a link from above HTML, I want to get the jQuery object of the corresponding <a> element, and then manipulate its sibling. I can't think of any way other than creating an ID for each <a> element, and passing that ID to an onclick event handler. I really don't want to use IDs.

Any suggestions?

Answer 1

Fortunately, jQuery selectors allow you much more freedom:

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

...will attach the specified callback to each <a> contained in a <div> .

Answer 2

When the jQuery click event calls your event handler, it sets "this" to the object that was clicked on. To turn it into a jQuery object, just pass it to the "$" function: $(this) . So, to get, for example, the next sibling element, you would do this inside the click handler:

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

Edit: After reading Kevin's comment, I realized I might be mistaken about what you want. If you want to do what he asked, ie select the corresponding link in the other div, you could use $(this).index() to get the clicked link's position. Then you would select the link in the other div by its position, for example with the "eq" method.

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

If you want to be able to go both ways, you will need some way of determining which div you are in so you know if you need "next()" or "prev()" after "parent()"

Answer 3

You will find the siblings() and parent() methods useful here.

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

Combining those methods with andSelf() will let you manipulate any combination of those elements you want.

Edit: The comment left by Mark regarding event delegation on Shog9's answer is a very good one. The easiest way to accomplish this in jQuery would be by using the live() method.

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

I think it actually binds the event to the root element, but the effect is that same. Not only is it more flexible, it also improves performance in a lot of cases. Just be sure to read the documentation to avoid any gotchas.

Answer 4

I think by combining .children() with $(this) will return the children of the selected item only

consider the following:

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

this will change the background of the clicked li only

Answer 5

To select the sibling, you'd need something like:

$(this).next();

So, Shog9's comment is not correct. First of all, you'd need to name the variable "clicked" outside of the div click function, otherwise, it is lost after the click occurs.

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