How do you check if a selector matches something in jQuery?

JavascriptJqueryJquery Selectors

Javascript Problem Overview


In Mootools, I'd just run if ($('target')) { ... }. Does if ($('#target')) { ... } in jQuery work the same way?

Javascript Solutions


Solution 1 - Javascript

As the other commenters are suggesting the most efficient way to do it seems to be:

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

If you absolutely must have an exists() function - which will be slower- you can do:

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

Then in your code you can use

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

As answered here

Solution 2 - Javascript

no, jquery always returns a jquery object regardless if a selector was matched or not. You need to use .length

if ( $('#someDiv').length ){

}

Solution 3 - Javascript

if you used:

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

you would imply that chaining was possible when it is not.

This would be better

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

Solution 4 - Javascript

I think most of the people replying here didn't quite understand the question, or else I might be mistaken.

The question is "how to check whether or not a selector exists in jQuery."

Most people have taken this for "how to check whether an element exists in the DOM using jQuery." Hardly interchangeable.

jQuery allows you to create custom selectors, but see here what happens when you try to use on e before initializing it;

$(':YEAH');
"Syntax error, unrecognized expression: YEAH"

After running into this, I realized it was simply a matter of checking

if ($.expr[':']['YEAH']) {
    // Query for your :YEAH selector with ease of mind.
}

Cheers.

Solution 5 - Javascript

Yet another way:

$('#elem').each(function(){
  // do stuff
});

Solution 6 - Javascript

if ($('#elem')[0]) {
  // do stuff
}

Solution 7 - Javascript

Alternatively:

if( jQuery('#elem').get(0) ) {}

Solution 8 - Javascript

I prefer the

    if (jQuery("#anyElement").is("*")){...}

Which basically checks if this elements is a kind of "*" (any element). Just a cleaner syntax and the "is" makes more sense inside an "if"

Solution 9 - Javascript

jQuery.fn.exists = function(selector, callback) {
    var $this = $(this);
    $this.each(function() {
        callback.call(this, ($(this).find(selector).length > 0));
    });
};

Solution 10 - Javascript

For me .exists doesn't work, so I use the index :

if ($("#elem").index() ! = -1) {}

Solution 11 - Javascript

firstly create a function:

$.fn.is_exists = function(){ return document.getElementById(selector) }

then

if($(selector).is_exists()){ ... }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOne CrayonView Question on Stackoverflow
Solution 1 - JavascriptPatView Answer on Stackoverflow
Solution 2 - JavascriptredsquareView Answer on Stackoverflow
Solution 3 - JavascriptJon EricksonView Answer on Stackoverflow
Solution 4 - JavascriptskqrView Answer on Stackoverflow
Solution 5 - JavascriptPhilTView Answer on Stackoverflow
Solution 6 - JavascriptSean CurtisView Answer on Stackoverflow
Solution 7 - JavascriptJamesView Answer on Stackoverflow
Solution 8 - Javascriptuser1134422View Answer on Stackoverflow
Solution 9 - JavascriptlogroxView Answer on Stackoverflow
Solution 10 - JavascriptMaurice MontreuilView Answer on Stackoverflow
Solution 11 - JavascriptTakács ZsoltView Answer on Stackoverflow