使用jQuery，如何在指定CSS类的同级元素中查找元素的索引

Question

Given the following HTML:

<div class="component">
    <div class="component">
        <div class="component">
        </div>
    </div>
    <div class="component">
        <div class="somethingelse">
        </div>
        <div class="component">
        </div>
        <div class="component">
            <input type="button" value="Get Path" onclick="showPath(this)" />
        </div>
    </div>
</div>

I'm trying to write the function showPath so that it returns the index of the parent div in relation to its siblings of class component . So in the above sample, I would like the function to return 1 .

I've got this far, but it returns 2 ; I don't know what to do to ignore the div of class somethingelse

function showPath(element) {
    var component = $(element).closest('.component');
    alert(component.index());
}

Answer 1

Try this(haven't tested):

function showPath(element) {      
  var component = $(element).closest('.component');     
  alert(component.parent().find(".component").index(component)); 
} 

Answer 2

A quick and simple extension for jQ to turn this process into a method:

$.fn.getIndex = function(){
    var index = $(this).parent().children().index( $(this) );
    return index;
}

Run this on document.ready or wrap it in a function and run it that way (probably cleaner).

Usage is as simple as

var index_for_element = $('.thing-you-want-index-for').getIndex();

Answer 3

You can do this.

$('input').click(function() {
    var component = $(this).closest('.component');
    alert(component.parent().children(".component").index(component));
})

Check working example at http://jsfiddle.net/Qzk6A/2/