Question

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>

Example

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

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';
}

Answer 1

嗯，以下内容将根据您的需要进行：

$('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
    };
}

已编辑以回应其他答案留下的评论：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

参考文献：

Answer 2

修改

抱歉，我误解了你的问题。这是答案：

打开你的萤火虫

使用检查工具
选择元素
点击后，右侧点击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的位置。

Answer 3

DOM的树。如果您尝试通过XPath获取它，则每个元素都有数字。

我如何获得元素的位置编号？

3 个答案: