How can i get the position number of an element?

问题

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>

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.

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

回答1:

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:

childNodes.
e.preventDefault().
e.stopPropagation().
getElementsByTagName().
parentNode.
push().

回答2:

Dom-tree. Every element have number if you try to get it by their XPath.

回答3:

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:

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.

来源：https://stackoverflow.com/questions/8555061/how-can-i-get-the-position-number-of-an-element

标签

html

firefox

dom

firebug

traversal