HTML and JavaScript "this"

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.

(reference): [ids](http://www.w3.org/TR/html4/struct/global.html#h-7.5.2) *must begin with a letter `([A-Za-z])`* ([see docs](http://www.w3.org/TR/html4/types.html#type-name)) — Yoshi, Aug 11 '11 at 10:44
possible duplicate of [Finding DOM node index](http://stackoverflow.com/questions/378365/finding-dom-node-index) — Shadow The GPT Wizard, Aug 11 '11 at 10:54

cutsoy · Answer 1 · 2011-08-11T11:12:33.093

2

Sure:

var index = this.parentNode.parentNode.childNodes.indexOf(this.parentNode);

NodeList.prototype.indexOf = function(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == obj) return i;
    }
    return undefined;
}

edited Aug 11 '11 at 11:12

answered Aug 11 '11 at 10:40

cutsoy

10,127
4
40
57

One note: indexOf is not supported in IE. There are JS functions on the web that emulates it for IE and use native implementation if possible. Here is one example of such function http://snippets.dzone.com/posts/show/2437 – J0HN Aug 11 '11 at 10:42
Here's a good fix for that: http://stackoverflow.com/questions/1744310/how-to-fix-array-indexof-in-javascript-for-ie-browsers – cutsoy Aug 11 '11 at 10:44
1

`childNodes` is a NodeList, not an array, so it doesn't have an `indexOf` method. And this would include text nodes, including white space, which probably isn't what you want. Edit: and `this` is always the link, which is always the first element in the parent, so it would always be `0` anyway. – lonesomeday Aug 11 '11 at 10:44
For some reason it throws error: this.parentNode.childNodes.indexOf(this) is not a function – ncla Aug 11 '11 at 10:49
Try again =)! (just add the prototype). – cutsoy Aug 11 '11 at 10:52
Uncaught TypeError: Object # has no method 'indexOf' on Chrome. – ncla Aug 11 '11 at 10:57
Got it working like this - var index = this.parentNode.parentNode.childNodes.indexOf(this.parentNode); but it returns 1,3,5. – ncla Aug 11 '11 at 11:08
1

@nuclear that's because text nodes that are also part of the list, in addition to the list items. See my answer and test case. – Shadow The GPT Wizard Aug 11 '11 at 11:10

score 1 · Accepted Answer · answered Aug 11 '11 at 11:09

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.

Ben · Answer 3 · 2011-08-11T10:50:27.460

0

Or:

<a href="#" onclick='doSomething(this)'>

Edit

After re-reading your question, it appears you want something along the lines of @Tim van Elsloo, but I'll leave this up for information purposes anyway.

Edit 2

After re-re-reading your question, are you just looking for GET?

<a href='?clicked=1'>Click Me</a>

edited Aug 11 '11 at 10:50

answered Aug 11 '11 at 10:41

Ben

54,723
49
178
224

Tim van Elsloo solution is what I am looking for. – ncla Aug 11 '11 at 10:51

HTML and JavaScript "this"

3 Answers3