How to get an element by its href in jQuery?

Exploring the href attribute with jQuery

Exact href value

// Talk about precision! You just got your first element.
var linksToGoogle = $('a[href="https://google.com"]');


This will get you the first anchor tag with the exact href https://google.com.

Starts with a specific URL

To gather elements with href attribute that starts with a specific piece of URL, use the attribute-starts-with selector ^=.

// Be the Sherlock Holmes of URLs!🕵️
var allLinksToGoogle = $('a[href^="https://google.com"]');


Contains a string

To get elements with href containing a certain string, use the attribute-contains selector *=.

// It's like Google but for your code! // SEARCH-ception!😄
var hrefWithGoogle = $('a[href*="google.com"]');


Complex scenarios and those sweet selectors!

Combining attribute selectors

You can combine several selectors for more refined results.

// When one condition is too mainstream...
var specificLinks = $('a[href*="example.com"][data-analytics]');


Exclusion management with :not selector

The not pseudo-class can be extremely helpful when you need to exclude certain elements:

// Not you, PDF links. Not you...
var notPDFs = $('a:not([href$=".pdf"])');


In the above snippet, we're ignoring all those pesky PDF links!

Handling dynamic environments

Managing asynchronous content

In cases where content may be loaded asynchronously, direct queries might fail. We have a solution though, make use of delegation via .on():

// Time-travel is possible with jQuery!⏱️
$(document).on('click', 'a[href="https://example.com"]', function() {
  // Your amazing functionality here
});


Dealing with case sensitivity of URL

Browsers might change the case of URLs but jQuery's attribute selectors are strictly case-sensitive. Here is a neat trick to tackle this issue:

// Who knew, jQuery could yell or whisper
var caseInsensitive = $('a').filter(function() {
  return this.href.toLowerCase() === "https://example.com".toLowerCase();
});


Maximizing Performance

Scope your jQuery selection

Direct attribute searches can be costly, so reduce your search scope:

// Let's play 'hide n seek' 🙈
var navElements = $('#navbar a[href="https://example.com"]');


Cache to rescue

Cache your jQuery results if you are planning to reuse them:

// Downloading an element for offline use. 📥
var cachedElement = $('a[href="https://example.com"]');
