Get index of element as child relative to parent
javascript, jquery
Solution
$("#wizard li").click(function () {
console.log( $(this).index() );
});
However rather than attaching one click handler for each list item it is better (performance wise) to use `delegate` which would look like this:
$("#wizard").delegate('li', 'click', function () {
console.log( $(this).index() );
});
In jQuery 1.7+, you should use `on`. The below example binds the event to the `#wizard` element, working like a delegate event:
$("#wizard").on("click", "li", function() {
console.log( $(this).index() );
});
Problem
Let's say I have this markup: ``` <ul id="wizard"> <li>Step 1</li> <li>Step 2</li> </ul> ``` And I have this jQuery: ``` $("#wizard li").click(function () { // alert index of li relative to ul parent }); ``` How can I get the index of the child `li` relative to it's parent, when clicking that `li`? For example, when you click "Step 1", an `alert` with "0" should pop up.