CODEWITHSUNDEEP
javascriptjqueryhtml
Jack
Jack

Reputation: 7567

How do I find out whether an element with that ID exists or not?

I do a:

console.log($('#test'));

I know that test doesn't exist. If I do a console.log, it doesn't output undefined/null. Rather it ouputs something like an empty array and when I check that array it looks like it returns the jQuery object itself.

I also tried:

if ($('#test')){
    //do something
}

But it still doesn't work. I want to know whether the ID I am selecting exists on page or not. How do I do that using jQuery?

Upvotes: 0

Views: 228

Answers (7)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

best way for this is to check length of the selected element 

if ($('#test').length > 0){
    //do something
}

But if you want to create a exist function jQuery welcomes you just add the line in your script 

jQuery.fn.exists = function(){return this.length>0;}

and now you can Check if element exist or not 

if ($(selector).exists()) {
  // Do something
}

Upvotes: 1

jfriend00
jfriend00

Reputation: 708206

It's something like 20x faster to do this:

if (document.getElementById("test"))

compared to the jQuery operation to just determine if a DOM object with that id exists in the page. jQuery can do a lot for you, but when its general selector engine and general object structure isn't needed, it's not the quickest way to do things.

As others have said, $("#test") is always a valid jQuery object, even if #testdoesn't exist. If the #test object doesn't exist, then $("#test") will be a jQuery object that has no DOM objects in it (the internal array will have a .length === 0), but it's still a valid object.

Upvotes: 4

Paul Calabro
Paul Calabro

Reputation: 1906

console.log($('#test'));

This won't print the value because it represents the object found in the DOM with the id test. If you want to get values, use $("#test").val(); or $("#test").html();

If you want to check existence, do the length test as suggested above.

Also, if you're testing for the existence of a generated element (something you added to the DOM), make sure you checkout .live (http://api.jquery.com/live/). This is need for all elements that are created after the page is loaded.

Upvotes: 0

Musa
Musa

Reputation: 97727

Use 

if ($('#test').length > 0){
    //do something
}

the length tells you how many items were selected if it is 0 no element has the id test.

Upvotes: 1

alex
alex

Reputation: 490667

In JavaScript, objects are always truthy, so using it in that fashion will always pass the condition.

You need to check the length property. A response of 0 is falsy, and will work as expected.

if ($('#test').length) { 
    // ...    
}

This is unlike document.getElementById(), which returns null if the element with that id attribute does not exist.

If this is confusing, you could always write a quick jQuery plugin.

$.fn.exists = function() {
    return !!this.length;
};

You can then call exists() on a jQuery collection, to ensure that selector has matched at least one item.

Upvotes: 1

rahul
rahul

Reputation: 7663

use something like this 

if ($('#test').length > 0){
    alert('hi')
  }else
  {
     alert('hello')
  }

Live Demo ​

Upvotes: 1

gabitzish
gabitzish

Reputation: 9691

Use '(' and ')' for 'if' statements, and check if the returned array has length greater than 0: 

if ($('#test').length > 0){
    //do something
}

Upvotes: 1

Related Questions