如何获取元素的位置号？

发布于 2024-12-21 20:10:17 字数 1361 浏览 0 评论 0原文

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 中的 Web 开发人员工具栏有一个工具，可让您查看所有 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';
}

原文

Is there any plugin in firefox or function in firebug or something else, that lets me se the position number of a specific element?

If i for example want to know the what position a specific TD element has compared to all the TD's in the document.

EXAMPLE:

<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

The webdeveloper toolbar in firefox has a tool that lets you see the index number of all DIV's. This is what i need but for other elements, not just DIV.
Web developer toolbar

PS. I was inspired by the correct answer and i made my own solution:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一笑百媚生 2024-12-28 20:10:17

好吧，以下内容将满足您的需要：

$('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 演示。

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

$('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 中的相等元素（例如）进行比较。

引用。

以下函数将获取并返回文档中相同类型的其他标签中被单击元素的索引位置（实际上比上面更容易）：

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 演示。

参考文献：

Well, the following will do as you need:

$('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.

Edited the above in order to show how to assign the element's index, amongst its siblings, to a variable:

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

Edited in response to comments left on other answers, by OP:

I want the number/sequence position of a specific element(e.g ) compared to equal elements(e.g ) in the whole DOM.

Citation.

The following function will get, and return, the index position of the clicked element amongst other tags of the same type in the document (which is actually somewhat easier than the above):

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.

References:

回复收藏 0 原文

苍景流年 2024-12-28 20:10:17

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

回复收藏 0 原文

假装爱人 2024-12-28 20:10:17

编辑

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

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

EDIT

Sorry, I've misunderstood your question. Here is the answer then:

Open your firebug
Select your element with the inspect tool
Once you clicked, one the right side click the dom link
See the cell index there.

Like this:

enter image description here

With javascript you can get the numbers of 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);

The example above will print the totoal number of td elements in your document. However, if you want a particular td, you should give that td an identifier. For instance assume your html file is like:

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

Now with javascript you can:

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);

}

This example will give your td's position.

回复收藏 0 原文

~没有更多了~