You want to do some conditional processing depending on if an item or items exist in your DOM (Document Object Model). By default, jQuery doesn't have a function that performs this; however, there is a very simple way to extend jQuery to do so.
Let's get right to the code:
Some people might consider it overkill to extend jQuery to perform such a simple statement, but sometimes readability is just as important. This same code could be altered as follows and would accomplish the same thing:
To perform subsequent checks on other objects, it is basically the same amount of typing; however, by calling an exists function, my code is more readable without the need to add a comment because it's quite clear what is being done via a descriptive function name.
jQuery is extremely simple to extend and create custom functions that can then be applied to any jQuery selector – in this case checking if an item exists! Published on Mar 19, 2019 Tags: extend
| JavaScript
| jQuery Tutorial
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
Extending jQuery with an Exists function
// Extend jQuery with an "exists" function
jQuery.fn.exists = function() {
return this.length;
};
// Call the exists function
if ($("#myId").exists()) {
// Do something because it exists
}
// Call the exists function
if ($("#myId").length) {
// Do something because it exists
}
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.