JQuery – Run script if!

TAGs: 18 Comment

Posted By: eligeske on in JQuery

When running a site with a boat load 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 do an action to that if it isn’t intended.

So. Run my enclosed script if! I read somewhere a while back on a nice way of determining if an element exists. Really simple and I definitely cannot take credit for this.

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

You could either have an entirely new javascript page for that page || you could do the following.

Create something with a unique id that you don’t plan on using elsewhere on your site, so maybe the page name. <body id=”myPageName”>

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!

18 Responses to "JQuery – Run script if!"

  1. Alberto says:

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

  2. jay says:

    It is really something new for me…seems interesting

  3. Jerry Aragus says:

    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

  4. eligeske says:

    No Problemo!!!

  5. Pol Moneys says:

    is that easy?
    love it,thanks for sharing.

  6. kl says:

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

  7. Pingback: Good tip to optimize JavaScript execution: JQuery – Run script IF! « Web Page Authority Blog

  8. swift says:

    any length (!):

    if ( $( ‘&#35element’ ).length ) {
    //everything you want to run inside here.

  9. swift says:

    oups )

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


  10. Pete says:

    Thank you, for helping me ^_^

  11. Jason says:

    I usually find it simpler to use something like this:

    // 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

  12. wison says:

    I think it perfect usage at some situation.

  13. Ben Sandberg says:

    if ($(‘&#35myPageName’)){
    //everything you want to run inside here.


  14. Ben Sandberg says:

    uh… disregard previous comment.


  15. davide says:

    I liked your post. Cheers

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

    if ( $(‘#el’).size() ){

    // 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:

  17. 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?

  18. eligeske says:


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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post