An AMD (Require.js) and browser compatible jQuery plugin to check more easily and better whether an element (or many) exists.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
project
src
task
test
.gitattributes
.gitignore
.jshintrc
.travis.yml
Gruntfile.js
LICENSE-MIT
PROJECT_NOTES
README.md
bower.json
jquery.exists.js
package.json

README.md

jQuery-exists Build Status

An AMD (Require.js) and browser compatible jQuery plugin to check more easily and better whether an element (or many) exists.

To support this project, you can at the support page by supporting the developer.

Getting Started

NPM (What is NPM? What is Grunt?)

npm install jquery-exists

Bower (What is Bower?)

bower install jquery-exists

Download directly (Do not link this directly on your site, the file is sent with a plain/text header and can cause loading problems)

API & Usage

The jQuery-exists plugin provides better, more defensive functionality, than just checking for .length, also more flexible with the optional parent argument.

The optional parent argument provides additional functionality to check, whether the element actually exists within the provided parent argument.

The optional parent argument must be string, a selector (jQuery selector) expression to match elements against. Native DOM elements and jQuery objects are not accepted.

Function Description Example
$("...").exists() Check whether the element (or many) exists.
The default value for the optional parent argument is "html", which simply means, the element (or many) must exist and appended to the DOM in order .exists() to return true.
$("#headerMain").exists()
$("...").exists("parent") Check whether the element (or many) exists and the element is within the provided parent as a string value. $("#headerSub").exists("#header")

In Browser (NPM)

    <!-- important to add jquery before jquery-exists plugin -->
    <script src="node_modules/jquery-exists/jquery.exists.js"></script>

In Browser (Bower)

    <!-- important to add jquery before jquery-exists plugin -->
    <script src="bower_components/jquery-exists/jquery.exists.js"></script>

In Browser (Require.js)

    <script>
        require(["jquery", "jquery-exists"], function($) {
                /* jquery-exists is usable from now on */
        });
    </script>

In case, you have some strange problems using jQuery with Require.js, try the following:

  • install Require.js using npm (npm install requirejs)
  • install jQuery using npm (npm install jquery)
  • install jQuery-exists using npm (npm install jquery-exists)

After these steps, using Require.js .config(...) function, additional setup is needed to use jQuery:

require.config({
    baseUrl: "./",
    paths: {
        jquery: "node_modules/jquery/dist/jquery"
    }
});

And the final, usable example:

    <script>
        require.config({
            baseUrl: "./",
            paths: {
                jquery: "node_modules/jquery/dist/jquery"
            }
        });
        require(["jquery", "node_modules/jquery-exists/jquery.exists"], function($) {
                /* jquery-exists is usable from now on */
        });
    </script>

In case you would like to use paths to make the code more clear and readable, this is recommended:

    <script>
        require.config({
            baseUrl: "./",
            paths: {
                jquery: "node_modules/jquery/dist/jquery",
                "jquery-exists": "node_modules/jquery-exists/jquery.exists"
            }
        });
        require(["jquery", "jquery-exists"], function($) {
                /* jquery-exists is usable from now on */
        });
    </script>

In Browser (Directly downloaded source)

    <!-- important to add jquery before jquery-exists plugin -->
    <script src="scripts/jquery.exists.js"></script>

In the code:

To simply check in general, whether an element exists or not:

    if($("selector").exists()) {
        /* do logic afterwards */
    }

More concrete example:

    if($("#headerMain").exists()) {
        /* do logic afterwards */
    }

Check if the specified element is within the given parent:

    if($("#rightLinks").exists("#headerMain")) {
        /* do logic afterwards */
    }

Internet Explorer 8 and Below

This plugins is compatible with IE8 and was tested with IE8 & jQuery 1.9.0.

Suggestions, Ideas & Requests

Post any occurring suggestions, useful ideas and requests to the project's issue page under the suggestion/idea/request label by clicking here.

  • Constructive criticism is encouraged and welcomed by contacting the developer or using GitHub.

Issues/Bugs

In case of any occurring issues and/or bugs, post on the project's issues page with appropriate label(s).

Support

If you find this tool useful, you can support this project by supporting the developer here.

Contribution & A Note

In the spirit of open source software development, this project is always open to and encourages community code contribution. To get started, just run through the source file, check the comments and general coding style and start to contribute.

  • In case you find this tool useful, support it by supporting the developer, follow the developer on social platforms or send an email to the developer.

License

Copyright (c) 2014 "Richard KnG" Richárd Szakács. Licensed under the MIT license.

The license mentioned above applies to all parts of this software except as documented below

All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses. We recommend you read them, as their terms may differ from the terms above.