如何获取元素的位置编号？答案

【问题标题】：How can i get the position number of an element?如何获取元素的位置编号？
【发布时间】：2012-01-23 05:06:59
【问题描述】：

firefox中是否有任何插件或firebug中的函数或其他东西，可以让我查看特定元素的位置编号？

例如，如果我想知道特定 TD 元素与文档中所有 TD 相比的位置。

示例：

<html>
<head>
<body>
<table>
<tr>
<td></td> (0)
<td></td> (1)
<td></td> (2)
<td></td> (3)
<td></td> (And so on...)
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> <------ WHAT IS THE POSITION NUMBER OF THIS TD?
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

firefox 中的 webdeveloper 工具栏有一个工具可以让您查看所有 DIV 的索引号。这是我需要的，但对于其他元素，不仅仅是 DIV。

PS。我受到正确答案的启发，并提出了自己的解决方案：

var dom = document.getElementsByTagName('td');
var x;
for(x = 0; x < dom.length; x++)
{
    dom[x].innerHTML = dom[x].nodeName + '[' + x + '] ' + '(' + dom[x].innerHTML + ')';
    dom[x].style.color = 'blue';
}

【问题讨论】：

使用 jQuery：$( 'td' ).index( yourTD ) 或 $( yourTD ).index( 'td' )

标签： html firefox dom firebug traversal

【解决方案1】：

编辑

对不起，我误解了你的问题。那么答案如下：

打开你的萤火虫
使用检查工具选择您的元素
单击后，在右侧单击 dom 链接
查看那里的单元格索引。

像这样：

使用 javascript 您可以获得 tds 的数量。

var tds = document.getElementsByTagName('td'); // this will return every td in the document. 
if (console && console.log)
   console.log(tds.length);
else
   alert(tds.length);

上面的示例将打印文档中 td 元素的总数。但是，如果你想要一个特定的 td，你应该给那个 td 一个标识符。例如假设你的 html 文件是这样的：

...
<td id="your_td"></td>
...

现在使用 javascript 你可以：

var td = document.getElementById('your_td'); // this will return the td 
// if you want its position you can: 
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) { 

   if (tds[i] === td) 
       alert(i);

}

这个例子会给出你的 td 的位置。

【讨论】：

感谢您的代码有效，但我正在寻找一种工具或插件，可以让我快速单击一个元素，它会告诉我特定元素的位置编号。可能有点像firebug的inspect element工具。
谢谢，但仍然不是我要找的...让我澄清一下：我想要一个特定元素（例如）的数字/序列位置与相等元素（例如 ) 在整个 DOM 中。我不希望将元素的数量与其父级中的相同元素进行比较，例如您的带有单元格索引的示例。希望这会有所帮助:-)
啊，那我不知道答案对不起。
如果你尝试将一些 TD 放入一个新的 TR 中，你会发现它们的位置编号是相对于它们的父级而不是整个 DOM。

【解决方案2】：

Dom 树。如果您尝试通过 XPath 获取每个元素，则每个元素都有编号。

【讨论】：

这个不行，例如：/html/body/form/div[2]/div[2]/div/div[3]/div/div[2]/div/div/ div/div/div[2]/div/table/tbody/tr[5]/td[2] 这是 xpath firebug 为我提供的特定 td 元素，但我需要知道 TD 与所有元素相比的数字是多少TD 在 DOM 中。

【解决方案3】：

好吧，以下将根据您的需要进行：

$('li').each(

function(i) {
    $(this).text('list element ' + i);
});

function indexAmongSiblings(elem) {
    if (!elem) {
        return false;
    }
    var that = elem;
    var parent = that.parentNode;
    var siblings = parent.childNodes;
    var elemSiblings = [];
    for (var s = 0, numberOf = siblings.length; s < numberOf; s++) {
        if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) {
            elemSiblings.push(siblings[s]);
        }
    }
    for (var e=0,l=elemSiblings.length; e<l; e++){
        if (elemSiblings[e] == elem){
            console.log('Element number: ' + e + ' among its siblings.');
        }
    }
}

var elements = document.getElementsByTagName('*');

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function(e) {
        e.stopPropagation();
        indexAmongSiblings(this);
    };
}

JS Fiddle demo.

编辑上面的内容是为了展示如何将元素的索引在其兄弟元素中分配给变量：

$('li').each(

function(i) {
    $(this).text('list element ' + i);
});

function indexAmongSiblings(elem) {
    if (!elem) {
        return false;
    }
    var that = elem;
    var parent = that.parentNode;
    var siblings = parent.childNodes;
    var elemSiblings = [];
    for (var s = 0, numberOf = siblings.length; s < numberOf; s++) {
        if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) {
            elemSiblings.push(siblings[s]);
        }
    }
    for (var e=0,l=elemSiblings.length; e<l; e++){
        if (elemSiblings[e] == elem){
            // the following returns the index-point amongst siblings
            return e;
        }
    }
}

var elements = document.getElementsByTagName('*');

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function(e) {
        e.stopPropagation();
        var thisIndex = indexAmongSiblings(this);
        // the thisIndex variable now holds the returned index-point
    };
}

编辑以回应 cmets 留下的其他答案，由 OP：

我想要一个特定元素（例如）的数字/序列位置与整个 DOM 中的相等元素（例如）相比。

Citation.

以下函数将获取并返回被点击元素在文档中其他同类型标签中的索引位置（实际上比上面的要简单一些）：

function indexAmongSameTags(elem) {
    if (!elem || !elem.tagName) {
        return false;
    }

    var thisIs = elem.tagName.toLowerCase(),
        sameAs = document.getElementsByTagName(thisIs);

    for (var i=0,len=sameAs.length; i<len; i++){
        if (sameAs[i] == elem){
            console.log('You clicked ' + thisIs + ' of index position "' + i + '" among ' + len + ' other ' + thisIs + ' elements');
            return i;
        }
    }

}

var elements = document.getElementsByTagName('*');

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function(e) {
        e.stopPropagation();
        var indexPosition = indexAmongSameTags(this);
        console.log(indexPosition);
    };
}

JS Fiddle demo.

参考资料：

【讨论】：

啊啊啊啊啊啊啊啊啊啊！完美运行 :-) 只需将其粘贴到萤火虫控制台中即可，很好。由于该工作没有内置工具，我将使用此脚本，谢谢！ :-)