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

Question

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

See also Is there an exists function for jQuery?

Bergi
– Bergi

2013-08-02 14:08:26 +00:00
Commented Aug 2, 2013 at 14:08 — Bergi
– Bergi, Commented Aug 2, 2013 at 14:08

Community · Accepted Answer · 2017-05-23 12:10:31Z

806

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

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Nov 18, 2008 at 19:20

Pat

36.8k18 gold badges75 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

redsquare Over a year ago

what is the point in this when .length does exactly the same?

Alex Sexton Over a year ago

This is one of the sillier plugins I've ever seen...

Pat Over a year ago

I have reworded the reply to emphasize that $.fn.exists is slower.

Josef Over a year ago

@TrueBlueAussie it is very bad API design to have a "exists" function that can return 3, IMO!

iCollect.it Ltd Over a year ago

@Josef: And very poor code design if you are doing math on the return value of a function called exists... IMHO :) Actually adding a one-liner extension, like exists() that is 2 characters longer than what it replaces is silly to begin with for JS! :)

|

redsquare · Accepted Answer · 2008-11-18 19:17:09Z

102

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

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

answered Nov 18, 2008 at 19:17

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

This is more practical than the accepted answer's second suggestion. (Why would you introduce a slower & longer alternative to simply checking length!). I also note your answer was earlier +1 :)

Jon Erickson · Accepted Answer · 2009-01-14 19:43:58Z

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)) { }

Could you provide an example where chaining is not possible?
@TomasM: Well, .exist() returns a bool, on which you cannot call jQuery methods, see comments below this answer.

skqr · Accepted Answer · 2012-03-18 16:33:48Z

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.

Note: The question has been changed to mean what they intended after this was posted, so this answer no longer has meaning here :)

Grzegorz Rożniecki · Accepted Answer · 2012-08-30 14:21:01Z

16

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

edited Aug 30, 2012 at 14:21

Grzegorz Rożniecki

28.1k11 gold badges95 silver badges116 bronze badges

answered May 27, 2010 at 4:22

Sean Curtis

1611 silver badge2 bronze badges

2 Comments

Sam Hasler Over a year ago

I like this for brevity. Can anyone say whether it will work everywhere .length will work?

natevw Over a year ago

The only case it wouldn't is if jQuery gave you an array with e.g. null (or otherwise "falsy") contents instead of DOM element objects, which would be surprising.

PhilT · Accepted Answer · 2010-10-22 07:53:37Z

15

Yet another way:

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

answered Oct 22, 2010 at 7:53

PhilT

4,3941 gold badge40 silver badges29 bronze badges

3 Comments

Abdullah Jibaly Over a year ago

Nice, cleaner approach if you don't want to do anything special if #elem does not exist.

iCollect.it Ltd Over a year ago

As an ID can only exists once, and duplicates are ignored by JS and jQuery, this may lead to confusion if you do not explain that it is a 0 or 1 situation :)

Mike Aron Over a year ago

I can't believe that this answer get upvotes. This have nothing to do with existens check. Totaly wrong direction.

James · Accepted Answer · 2008-11-19 09:40:06Z

3

Alternatively:

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

answered Nov 19, 2008 at 9:40

James

112k32 gold badges165 silver badges177 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

This is no shorter than .length (and slower). $('#elem')[0] would do the same.

Taryn · Accepted Answer · 2014-01-24 12:17:30Z

2

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

edited Jan 24, 2014 at 12:17

Taryn

249k57 gold badges374 silver badges409 bronze badges

answered Jan 23, 2014 at 13:56

logrox

535 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Why would you ever do an each and a callback if you just want to know if there was zero or more matches? I now feel more stupid than I was before I read this! -1.

user1134422 · Accepted Answer · 2012-08-11 19:50:19Z

1

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"

answered Aug 11, 2012 at 19:50

user1134422

1,2711 gold badge9 silver badges7 bronze badges

2 Comments

Christophe Over a year ago

sounds like a lot of effort, compared to just reading an existing property

iCollect.it Ltd Over a year ago

This is significantly slower than the alternatives and arguably less readable. You would not introduce parsing to check the length of an array and a jQuery object behaves just like an array.

Aliaksei Kliuchnikau · Accepted Answer · 2012-02-02 12:09:42Z

-4

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

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

edited Feb 2, 2012 at 12:09

Aliaksei Kliuchnikau

13.7k4 gold badges63 silver badges74 bronze badges

answered Feb 2, 2012 at 12:08

Maurice Montreuil

9

2 Comments

afarazit Over a year ago

you have to create the exists() function

iCollect.it Ltd Over a year ago

This is longer and slower than using .length. This answer is best deleted (voting to delete).

Zsolt Takács · Accepted Answer · 2013-09-30 08:47:38Z

-7

firstly create a function:

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

then

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

answered Sep 30, 2013 at 8:47

Zsolt Takács

3645 silver badges14 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

This presumes the selector was an ID, not a jQuery selector as required. Best delete this answer as it is misleading. -1 & voting to delete

Collectives™ on Stack Overflow

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

11 Answers 11

13 Comments

1 Comment

2 Comments

1 Comment

2 Comments

3 Comments

1 Comment

1 Comment

2 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

13 Comments

1 Comment

2 Comments

1 Comment

2 Comments

3 Comments

1 Comment

1 Comment

2 Comments

2 Comments

1 Comment

Linked

Related