CODEWITHSUNDEEP
jqueryclickposition
Keith
Keith

Reputation: 26489

How to find out position of clicked element?

How do I find out, in what position a list item was clicked.

So, let's say I clicked the second list item: 

<li><a href="#"><span>Tab 2</span></a></li>

Then, I would get an alert saying something like:

You clicked the second list item?

JQuery Code

$('#top-betting ul li:first').addClass('current');
$('#top-betting div:not(:first)').hide();

$('#top-betting ul li span').click(function()
{
    ...?
});

Markup

<div id="tabs">
   <ul class="clearfix">
      <li><a href="#"><span>Tab 1</span></a></li>
      <li><a href="#"><span>Tab 2</span></a></li>
      <li><a href="#"><span>Tab 3</span></a></li>
   </ul>

   <div>Content 1</div>
   <div>Content 2</div>
   <div>Content 3</div>
</div>

Upvotes: 1

Views: 2873

Answers (3)

Jamiec
Jamiec

Reputation: 136074

index is the method you're after. 

$('li a').click(function(e){
        var $li = $(this).parents('li');
        var $ul = $(this).parents('ul');
        alert($ul.children().index($li));
    });

Check the jsFiddle: http://jsfiddle.net/9V9D2/

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630379

You can do it using .closest() and .index() like this:

$('#top-betting ul li span').click(function() {
   var index = $(this).closest('li').index();
});

Overall, I think this is what you're after:

$('#top-betting ul li span').click(function() {
    $("#top-betting div").eq($(this).closest('li').index()).show()
                         .siblings('div').hide();
});​

Upvotes: 5

SLaks
SLaks

Reputation: 887275

You're looking for the index method.

Upvotes: 0

Related Questions