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

Solution 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().

Solution 2:

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

Solution 3:

EDIT

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

1. Open your firebug
2. Select your element with the inspect tool
3. Once you clicked, one the right side click the dom link
4. 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.