如何确定具有该ID的元素是否存在？

Question

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?

Answer 1

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 #test doesn'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.

Answer 2

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

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

Answer 3

use something like this

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

Live Demo​

Answer 4

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
}

Answer 5

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.

Answer 6

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.

Answer 7

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.