0

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?

algorithmicCoder
  • 6,595
  • 20
  • 68
  • 117

5 Answers5

2

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.

mohamnag
  • 2,709
  • 5
  • 27
  • 40
2

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

Community
  • 1
  • 1
Frolin Ocariza
  • 210
  • 1
  • 8
  • awesome...this is in the spirit of what i want. Can you then somehow use jquery to select an element by Xpath? – algorithmicCoder Jan 10 '14 at 09:13
  • If you want to use the $() method, you can use CSS selectors instead of Xpaths (you should be able to easily convert an Xpath to a CSS selector, and vice versa). See http://www.w3schools.com/cssref/css_selectors.asp – Frolin Ocariza Jan 10 '14 at 09:15
  • Thanks! Do you know of a ready made library that takes an xpath and returns css selectors? Seems like something generic enough to warrant a library. – algorithmicCoder Jan 10 '14 at 09:22
  • @algorithmicCoder Just to add to what I said, if you think Xpaths are easier to deal with, you can also use the document.evaluate() method. Check out the following which provides more detail: http://stackoverflow.com/a/4284136/2825340 – Frolin Ocariza Jan 10 '14 at 09:23
  • @algorithmicCoder No, I'm not familiar with any such libraries. But if you were to implement your own converter, it should be a fairly straightforward parsing task (e.g., the Xpath expression BODY/DIV[3]/SPAN[2] is equivalent to the selector body > div:nth-of-type(3) > span:nth-of-type(2)) – Frolin Ocariza Jan 10 '14 at 09:33
  • yeah i cant imagine it's hard...thanks...ill make one and release it if it turns out to be remotely interesting. – algorithmicCoder Jan 10 '14 at 10:46
  • Im not sure why your want to go down this road instead of keep a reference to the element itself?! do you want to serialize it or keep it between sessions or what? I mean you can take the food directly to your mouth or just turn it around your neck to eat! both will work – mohamnag Jan 10 '14 at 12:15
1

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.

Frederik Wordenskjold
  • 10,031
  • 6
  • 38
  • 57
1

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

Md Ashaduzzaman
  • 4,032
  • 2
  • 18
  • 34
  • how do you get the element later? Let's say I want to select the element that was clicked later...sometime next year let's say...what selector do i put in $(selector) to be able to find the element on the page? – algorithmicCoder Jan 10 '14 at 09:11
  • you can maintain an array and get the correct element using its index. Check the updated answer. – Md Ashaduzzaman Jan 10 '14 at 09:21
0

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')")
Nikita U.
  • 3,540
  • 1
  • 28
  • 37