22 Votes

jQuery: Does an Element exist?

Tip by Stefan Trost | Last update on 2023-02-02 | Created on 2013-01-28

Sometimes, we want to use jQuery to check whether there is an element existing within the current page. For example, to load an element only if it is not already present.

For that matter, we can work with the property "length" that is provided to us by every jQuery selector.

The trick: When creating a selector, jQuery stores all matching elements in an array. If we have an arbitrary selector, we can query the length of this array via ".length". If the length is 0, we know that there are no elements that fit the respective selector - so the element in question is not existing.

Check for Elements with a specific ID

Let's look at an example for this. In the following we would like to check for the presence of an element with a certain ID:

if ($('#a').length == 0) {
  alert('The element with the ID "a" does not exist.');
}

if ($('#b').length > 0) {
  alert('The element with the ID "a" exists.');
}

The jQuery selector for IDs places a diamond in front of the name of the corresponding ID. Accordingly, with this code we check whether there are elements of the IDs "a" or "b" on our page. In the first example, we would like to issue a message if there is no element with the ID "a" (the array length is 0 in that case). In the second example, we reverse the query and would like to show the message in the event that an element with the ID "b" is present (the array length should be greater than 0 in this case).

Check for Elements with a specific Class or a specific Element Type

Beyond checking for individual elements having a certain ID, we can also use any other jQuery selector we can imagine. Therefore, for example, we can also check for the presence of elements with certain classes or a certain type by simply using the corresponding selector for it:

if ($('.c').length > 0) {
  alert('At least one element with class "c" is available.');
}

if ($('img').length > 0) {
  alert('The page contains ' + $('img').length + ' images.');
}

if ($('h2').length == 0) {
  alert('There are no H2 headings on this page.');
}

if ($('#a.b').length > 0) {
  alert('The element with the ID "a" has assigned class "b".');
}

if ($('ul>li').length > 0) {
  alert('There are ' + $('ul>li').length + ' LI elements below UL.');
}

With these examples, we check whether there are elements of the class "c", images or h2-headings on the page (in the case of the pictures we also display the number of images found). We also test whether there is an element with the ID "a" to which class "b" is assigned and how many LI elements are there within a UL list.

As you can see: All typical jQuery selectors are possible.

ReplyPositiveNegative
22 Votes

If you would like to have it even more simpler, just omit the "> 0" and you can write the following:

if ($('#b').length) {
  alert('The element with the ID "a" exists.');
}

It is also working in this way, because the condition returns "false" at a length of 0 and "true" at a length greater 0.
2013-09-10 at 13:56

ReplyPositive Negative
Reply

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

jQuery: Show and hide elements

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.