使用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/

处的工作示例