Select current element in jQuery

Question

I have HTML code like this     lt div gt          lt a gt Link A1 lt  a gt          lt a gt Link A2 lt  a gt          lt a gt Link A3 lt  a gt   lt  div gt    lt div gt          lt a gt Link B1 lt  a gt          lt a gt Link B2 lt  a gt          lt a gt Link B3 lt  a gt   lt  div gt    When user clicks a link from above HTML  I want to get the jQuery object of the corresponding  lt a gt  element  and then manipulate its sibling  I can t think of any way other than creating an ID for each  lt a gt  element  and passing that ID to an onclick event handler  I really don t want to use IDs    Any suggestions

User · Answer

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, i.e. 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()"

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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, i.e. 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()"

User · Answer

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  lt a gt  contained in a  lt div gt

User · Answer

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  lt a gt  contained in a  lt div gt

User · Answer

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

User · Answer

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  lt a gt  contained in a  lt div gt

User · Answer

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, i.e. 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()"

User · Answer

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

User · Answer

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

User · Answer

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  lt a gt  contained in a  lt div gt

User · Answer

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

User · Answer

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

User · Answer

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, i.e. 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()"

[jquery] Select current element in jQuery

Examples related to jquery