CODEWITHSUNDEEP
javascriptjqueryhtmldom
algorithmicCoder
algorithmicCoder

Reputation: 6789

Is there a way to get a unique id/key of an html element that isn't marked up with an explicit id attribute?

so if someone clicks on a link like (excuse the jade):

div
 ul
  li
    a(href="/foo") Bar
  li
    a(href="/baz") Foo

Say i click on the link that says "Bar" how can i programmatically find the clicked node in the DOM? I can use a heuristic like tagName + innerHtml or something but does the DOM itself must have some way of identifying elements that i can use to query later on with normal javascript/jquery?

EDIT: Please We have to assume that we don't a priori know anything about what was clicked but we do have an event object after the click happens. Is there an event.target.something that is unique? and can i then say (in jquery) $(event.target.something) and correctly select the right element?

Upvotes: 0

Views: 2809

Answers (5)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

Simply hold the element that has been clicked and store it. That would help you retrieve it later without explicitly defining an id attribute.

HTML :

<a href="#a">Bar</a>
<a href="#b">Foo</a>

javaScript :

var clickedNode = [];
var counter = 0;

$("a").click(function(){
    clickedNode[counter] = $(this);
    alert(clickedNode[counter].text());
     counter++;
});


$("#lastValueButton").click(function(){
    alert(clickedNode[counter-1].text());
});

Demo

Upvotes: 1

Frolin Ocariza
Frolin Ocariza

Reputation: 210

I'm not exactly sure what you mean by "query later on" - i.e., when do you want to query, and what are you going to use the element for? If you want to access the clicked element while you're in the same HTML page (assuming that the click doesn't lead to another page), you can use the this keyword in your click handler to retrieve the clicked element, and then store it in some variable that you can access later on.

However, if you want to keep some sort of record of the clicked elements for future use (e.g., identifying what elements to click in a Selenium test case), you can uniquely identify elements in an HTML page by their Xpath, assuming that the DOM does not change along the way. For instance, you can do something like this

$("a").click(function() {
    var theClickedElement = $(this);
    getXpath(theClickedElement); //Display the return value of this somewhere
}

You can implement getXpath() using something similar to this answer (The code in the link calculates the relative Xpath - you can also get the absolute Xpath that contains only the tag names. For more information on XPath, check out this tutorial

Upvotes: 2

Frederik Wordenskjold
Frederik Wordenskjold

Reputation: 10221

I'm not sure I understand what you exactly want to do, but you can easily find the clicked element with an event listener, and do whatever you want with it:

$('a').click(function (e) {
    e.preventDefault();
    // ... Now 'this' refers to the element clicked
});

The passed e variable is a jQuery event, which contains all the information you need about the element clicked. e.target is the DOM node, which you could use to create a unique identifier yourself, if you absolutely need it.

Upvotes: 1

Nikita U.
Nikita U.

Reputation: 3618

As the answer on you title question:

Following to manual you can find links by it href like this:

$('a[href="/baz"]')

Also you can find elements that contains some text (manual)

$("a:contains('Bar')")

Upvotes: 0

mohamnag
mohamnag

Reputation: 2883

if you handle the click event, you will get the element in this variable. you can store it in a local or even a global variable to keep a reference to it. something like this:

outside of the event handler, maybe on load of the page:

var lastClickedElement;

and then inside your click event handler:

function() {
    lastClickedElement = this;
}

and then you have always a reference to the last clicked element.

Upvotes: 2

Related Questions