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

Question

鉴于以下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>

我试图编写函数showPath以便它返回父div与其类component同级的索引。 因此，在以上示例中，我希望函数返回1 。

我已经走了很远，但是它返回2 ； 我不知道该怎么办忽略div类的somethingelse

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

Answer 1

试试这个（尚未测试）：

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

Answer 2

jQ的快速简单扩展，可以将这个过程变成一种方法：

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

在document.ready上运行它或将其包装为一个函数并以这种方式运行（可能更干净）。

用法很简单

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

Answer 3

你可以这样做。

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

在http://jsfiddle.net/Qzk6A/2/中查看工作示例