How do i get a href value from a link within a ul li list

Question

I have an unordered list such as:

<ul id="cities">
  <li><a href="/london/">London<a></li>
  <li><a href="/new-york/">New York<a></li>
  <li><a href="/paris/">Paris<a></li>
<ul>

using jquery how do i get the href value for "New York"? Only the anchor text value is known through the client so i would like to find the matching anchor text and extract the href.

Thanks

Answer 1

You can use the :contains selector, like this:

$("#cities li a:contains(New York)").attr('href');

Or more longer, but more accurate (since :contains() would match "New York City" as well), you can use the .filter() method for an exact match, like this:

$("#cities li a").filter(function() {
  return $(this).text() === "New York";
}).attr('href');

Answer 2

var href = $('ul#cities li a').filter(function() {
  return $(this).text() === "New York";
}).attr('href');