Question

I am stuck with a problem here, please help. What my requirement is to get the index value of the div clicked. Have 2 lists, and i need to call a function doSomething(); only when the user clicks the first div set. Is there anyway that i can achieve it.

The scripts and HTML is as follows

$(document).ready(function() {
 $(".list-wrapper li").click(function() {
    var index = $(".list-wrapper div").index(this);
    alert(index);
    });
});

<div class="list-wrapper">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>

<div class="list-wrapper">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>

Please help…

Answer 1

jQuery has powerful selectors, so usually you don’t need to check the index after the event. For example:

For the first div on your page:

$(".list-wrapper:first").click(doSomething);

For the first <li>s in every list:

$(".list-wrapper li:first-child").click(doSomething);

If you still want to find the index, you need to search for the parent div of the clicked li. Also, the selector .list-wrapper div is empty – you don’t have any divs in list-wrapper. This will work:

var parent = $(this).closest('div')
var index = $(".list-wrapper").index(parent);