I am in need of obtaining the very last anchor of a website, regardless of the DOM tree structure.

I have tried:

$(document).ready(function(){
    var lastAnchor = $(this).find("a:last-child");
    alert(lastAnchor);
});

However I get all the last anchors that exist inside any element, which contains at least one anchor in it. I understand that this can be converted into an array and from there one may extract the last element... but that's just not the right approach. So what is the right approach?

Fun fact: After messing around with the selectors for some time I came up with:

$(this).find("a:last-child").find(":last-child")

Which lead to the obvious improvement:

$(this).find("a:last-child :last-child")

But I find this solution to be both inefficient and cumbersome. I refuse to believe that a better selector does not exist.

I think I am missing something obvious but it hasn't hit me yet.

Can anyone please enlighten me to whether there is a better way to do this or am I crying wolf for no reason?

EDIT: Bonus Round

Very good answers have been posted to this question thus far, all along the lines of CSS/JavaScript/JQuery. However could you kindly add whether or not your answer is cross browser patible?

I am in need of obtaining the very last anchor of a website, regardless of the DOM tree structure.

I have tried:

$(document).ready(function(){
    var lastAnchor = $(this).find("a:last-child");
    alert(lastAnchor);
});

However I get all the last anchors that exist inside any element, which contains at least one anchor in it. I understand that this can be converted into an array and from there one may extract the last element... but that's just not the right approach. So what is the right approach?

Fun fact: After messing around with the selectors for some time I came up with:

$(this).find("a:last-child").find(":last-child")

Which lead to the obvious improvement:

$(this).find("a:last-child :last-child")

But I find this solution to be both inefficient and cumbersome. I refuse to believe that a better selector does not exist.

I think I am missing something obvious but it hasn't hit me yet.

Can anyone please enlighten me to whether there is a better way to do this or am I crying wolf for no reason?

EDIT: Bonus Round

Very good answers have been posted to this question thus far, all along the lines of CSS/JavaScript/JQuery. However could you kindly add whether or not your answer is cross browser patible?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 5, 2015 at 21:45 AGE asked Nov 5, 2015 at 21:29 AGEAGE 3,79233 gold badges4242 silver badges6262 bronze badges 2

• "but that's just not the right approach" - Why not ? – Royi Namir Commented Nov 5, 2015 at 21:32
• because I believe a better selector should exist for this, don't you think? – AGE Commented Nov 5, 2015 at 21:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Why don't you try $('a:last');

The straightforward javascript is:

var anchors = document.getElementsByTagName("a");
var lastAnchor = anchors[(anchors.length - 1)];

This is cross-browser patible across all browsers all the way back to those browsers which understand only DOM Level 1 (ie. circa 2000 - Internet Explorer 5 and Netscape 6).

You're looking for a:last-of-type. Read more about it here: https://css-tricks./almanac/selectors/l/last-of-type/

I believe you want something like $("a").last()

This will look at all anchor elements in the page and give you the very last one that is retrieved.

Using just CSS selectors is tricky, since those tend to be dependant on the DOM arrangement, and you want the selector to be DOM agnostic. For example the a:last-child selector will only return an anchor tag that is the last element in its parent. If the last anchor on a page is not the last element in its parent, using that selector may not be helpful to you.

Use nth-last-child(). Its pretty useful when you want the last or 2nd to last.

$(this).find("a:nth-last-child(1)")

https://api.jquery./nth-last-child-selector/

http://jsfiddle/o5y9959b/