Back to Writing

jQuery – Run script IF!

A simple jQuery technique to run a script only if a certain element exists on the page, helping to optimize performance and prevent unintended script execution.

Eli Geske 4 min read
jquery javascript optimization conditional-execution
jQuery logo

When running a site with a boatload of JavaScript, you may want to run a script only if a certain something is on the page. Not only could this save on initial loading time, but more importantly, if you have an element of one thing on one page and the same named element for something else on another, you don’t want your jQuery to perform an action on it if it wasn’t intended.

So, run my enclosed script if! I read somewhere a while back about a nice way of determining if an element exists. It’s really simple, and I definitely cannot take credit for this.

Let’s say you have a div on your index page and some classes you want to change on page load. But on another page, you have some more of those same classes.

You could either have an entirely new JavaScript file for that specific page, or you could do the following:

Create something with a unique ID that you don’t plan on using elsewhere on your site—perhaps the page name:

<body id="myPageName"></body>

Then, all you need to do for jQuery is the following:

if ($('#myPageName').length > 0) {
  // everything you want to run inside here.
}

Got any other ideas that would work besides this? Please let me know!


Legacy Archive

This post originally appeared on eligeske.com in 2009 and has been recovered from the archives.

Legacy Comments Archive

This post originally appeared on my old site and has been recovered from the archives. Below are the original comments from the community.

A
Alberto
February 11, 2010

Thank you very much for this hint, I’m a jquery newbie and this made my day! :)

j
jay
February 13, 2010

It is really something new for me…seems interesting

J
Jerry Aragus
March 13, 2010

By far the most concise and up to date information I found on this topic. Sure glad that I navigated to your page by accident. I’ll be subscribing to your feed so that I can get the latest updates. Appreciate all the information here

E
Eli Geske Author
March 17, 2010

No Problemo!!!

P
Pol Moneys
May 9, 2010

is that easy? love it,thanks for sharing. p

k
kl
May 13, 2010

Thank you very much for this hint. keep on posting like this examples :)

s
swift
August 6, 2010

any length (!):

if ($('#element').length) {
  // everything you want to run inside here.
}
s
swift
August 6, 2010

oups )

if ($(yourElementSelector).length) {
  // your beautiful code poetry :)
}

regards

P
Pete
October 3, 2010

Thank you, for helping me ^_^

J
Jason
October 15, 2010

I usually find it simpler to use something like this:

if (document.getElementById('elementsID')) {
  // code in here
}

This will only work with IDs, and there is no hash mark used, just the value in id="" – this keeps from needing jQuery to process and convert the code to vanilla javascript – possibly negligible performance increase, but it should be faster than using jQuery functions – and of course all your jQuery can still go right inside of it

w
wison
January 4, 2011

I think it perfect usage at some situation.

d
davide
May 26, 2011

I liked your post. Cheers

S
Simon Ferragne
August 30, 2011

jQuery comes with a size() function. In javascript the number 0 = false so you can drop the >0.

if ($('#el').size()) {
  // code
}

// To run script if element dont exists
if (!$('#el').size()) {
  // code
}

But jQuery intern mechanism already implement this so you can avoid the if(){} if it is simple function like: $('#dontExistsElement').slideUp();

S
Shishir Sharma
March 11, 2013

I want to implement a slider functionality in my application. I found it implemented using jQuery1.9.1 version. However, my application uses jQuery 1.2.6. Now when I try to include 1.9.1 version, it shows incompatibilty issues. Is there any slider functionality implemented using 1.2.6? Or is there any other workaround for this issue?

E
Eli Geske Author
March 12, 2013

Shishir,

If the slider is from jqueryui, you need to make sure the jqueryui version you have is compatible with the jquery version.