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 must begin with a letter ([A-Za-z]) (see docs) — Yoshi
– Yoshi, Commented Aug 11, 2011 at 10:44

cutsoy · Accepted Answer · 2011-08-11 11:12:33Z

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, 2011 at 11:12

answered Aug 11, 2011 at 10:40

cutsoy

10.3k4 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

J0HN Over a year ago

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 snippets.dzone.com/posts/show/2437

cutsoy Over a year ago

Here's a good fix for that: stackoverflow.com/questions/1744310/…

lonesomeday Over a year ago

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.

ncla Over a year ago

For some reason it throws error: this.parentNode.childNodes.indexOf(this) is not a function

user447356 Over a year ago

@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.

|

user447356 · Accepted Answer · 2011-08-11 11:09:33Z

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.

answered Aug 11, 2011 at 11:09

user447356

Comments

Ben · Accepted Answer · 2011-08-11 10:50:27Z

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, 2011 at 10:50

answered Aug 11, 2011 at 10:41

Ben

57.6k50 gold badges187 silver badges229 bronze badges

1 Comment

ncla Over a year ago

Tim van Elsloo solution is what I am looking for.

Collectives™ on Stack Overflow

HTML and JavaScript "this"

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related