Question

I have this HTML code right here..

<ul>
    <li><a href="#" id="0">Services</a></li>
    <li><a href="#" id="1">Portfolio</a></li>
    <li><a href="#" id="2">Contact</a></li>
</ul>

And I have this JavaScript over here when you click on one of the links:

alert(this.id);

Question: is it possible to determine which “A” tag was clicked, without setting extra “id” attribute for links? With JavaScript it would be like this:

document.getElementsByTagName("a")[number];

And I need that number from “this”.

I hope you understand what I meant. Sorry for my english.

Answer 1

Here is less elegant, but working, solution:

window.onload = function() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            var index = FindIndex(this);
            alert("index: " + index);
            return false;
        };
    }
};

function FindIndex(oLink) {
    var listItem = oLink.parentNode;
    var oList = listItem.parentNode;
    var allItems = oList.getElementsByTagName("li");
    for (var i = 0; i < allItems.length; i++) {
        if (allItems[i] === listItem)
            return i;
    }
    return -1;
}

Live test case.