如何在JQuery中获取被单击元素的(DOM / document)索引

时间:2012-10-02 13:18:29

标签: jquery

我想使用jquery获取被点击元素的索引 - 使用.index()这应该很容易,但我不希望索引位于狭义定义的选择器中,例如$('div').index()

我想要的是页面/ DOM中该元素的唯一索引 - 如果存在,则为$(everything).index()

这是我简单的jquery点击功能:

$("div").click(function (e) {
   e.stopPropagation();
   index = $(this).index();
}); 

我使用了一些示例HTML:

<div>DIV 0 - I want to show as index=0 (which I do)</div>
<div>DIV 1 - I want to show as index=1 (which I do)</div>

<span>SPAN 0 - I want to show as (span) index=0</span>

<div>DIV 2 - I want to show as index=2 (but I don't, I show as 3)
    <div>DIV 3 - I want to show as index=3 (but I don't, I show as 0)</div>
    <span>SPAN 1 - I want to show as (span) index=1</span>
    <span>SPAN 2 - I want to show as (span) index=2</span>
</div>

JSfiddled与它一起玩。

我的问题是这些:

1)我不知道如何获得这些DIVS(或任何其他元素)的唯一索引号,因为$(this)仅引用CURRENT选择,因此嵌入式DIV重新索引为零,一旦点击。

2)我需要这个适用于任何/所有html标签(不仅仅是DIV)

感谢您提供的任何帮助!

3 个答案:

答案 0 :(得分:4)

虽然效率可能不高,但仍有效:

$(document).on('click', '*', function (e) {
   e.stopPropagation();
   var others = document.getElementsByTagName(this.tagName);
   var index = [].indexOf.call(others, this);
});

答案 1 :(得分:4)

使用

$(document).on('click','*',function (e) {
    e.stopPropagation();
    var tag = this.tagName;
    var index = $(tag).index(this);  // it now works

    $('#output').html(index);
});  

演示 http://jsfiddle.net/6n5zp/1/

答案 2 :(得分:1)

使用Alnitak解决方案,这适用于任何元素。

function getElementIndex(DOMELEMENT)
{
   var elements = document.getElementsByTagName(DOMELEMENT.tagName);
   return index = [].indexOf.call(elements , DOMELEMENT);
}