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。
附言。我受到正确答案的启发，并制定了自己的解决方案:
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';
}
最佳答案
好吧，以下将根据您的需要执行:
$('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);
};
}
编辑以上内容以展示如何将元素的索引及其兄弟元素分配给变量:
$('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 对其他答案留下的评论:
I want the number/sequence position of a specific element(e.g ) compared to equal elements(e.g ) in the whole 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);
};
}
引用资料:
关于html - 我怎样才能得到一个元素的位置编号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8555061/