Is there an exists function for jQuery

Question

How can I check the existence of an element in jQuery   The current code that I have is this   if    selector  length  gt  0           Do something     Is there a more elegant way to approach this  Perhaps a plugin or a function

User · Answer

Try this   simple and short and usable in the whole project   jQuery fn exists function   return   this 0       jQuery Plugin   Usage   console log    element-selector   exists                                          OR EVEN SHORTER   for when you don t want to define a jQuery plugin    if      elem-selector   0          or even  if    elem-selector   0

User · Answer

In JavaScript  everything is  truthy  or  falsy   and for numbers 0 means false  everything else true  So you could write  if    selector  length   You don t need that  gt 0 part

User · Answer

Here is the complete example of different situations and way to check if element exists using direct if on jQuery selector may or may not work because it returns array or elements  var a   null   var b       var c   undefined    if a    console log  quot  a exist quot    else   console log  quot a doesn t exit quot       output  a doesn t exit  if b    console log  quot  b exist quot    else   console log  quot b doesn t exit quot       output  b exist  if c    console log  quot  c exist quot    else   console log  quot c doesn t exit quot       output  c doesn t exit  FINAL SOLUTION if    quot  xysyxxs quot   length   console log  quot xusyxxs exist quot    else   console log  quot xusyxxs doesnn t exist quot       output   xusyxxs doesnn t exist  if    quot  xysyxxs quot   length   console log  quot xusyxxs exist quot    else   console log  quot xusyxxs doesnn t exist quot           output   xusyxxs doesnn t exist  Demo  x000D   x000D  console log  existing id       id-1   length  console log  non existing id       id-2   length   console log  existing class single instance       cls-1   length  console log  existing class multiple instance       cls-2   length  console log  non existing class       cls-3   length  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div id  id-1  gt     lt div class  cls-1 cls-2  gt  lt  div gt     lt div class  cls-2  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Yes The best method of doing this    By JQuery    if    selector   length        code in the case     selector can be Element ID OR Element Class  OR  If you don t want to use jQuery Library then you can achieve this by using Core JavaScript    By JavaScript    if document getElementById  ElementID            Do something

User · Answer

Checking for existence of an element is documented neatly in the official jQuery website itself      Use the  length property of the jQuery collection returned by your   selector   if      myDiv   length            myDiv   show            Note that it isn t always necessary to test whether an element exists    The following code will show the element if it exists  and do nothing    with no errors  if it does not       myDiv   show

User · Answer

if       myDiv   size    gt  0       do something     size   counts the number of elements returned by the selector

User · Answer

this is very similar to all of the answers  but why not use the   operator twice so you can get a boolean   jQuery fn exists   function   return   this length    if    selector  exists             the element exists  now what

User · Answer

You don t have to check if it s greater than 0 like   selector  length  gt  0    selector  length it s enough and an elegant way to check the existence of elements  I don t think that it is worth to write a function only for this  if you want to do more extra things  then yes  if   selector  length        true if length is not 0   else        false if length is 0

User · Answer

No need for jQuery  basic solution   if document querySelector   a-class           do something     Much more performant option below notice lack of a dot before a-class    if document getElementsByClassName  a-class   0          do something     querySelector uses a proper matching engine like      sizzle  in jQuery and uses more computing power but in 99  cases will do just fine  The second option is more explicit and tells the code exactly what to do  It s much faster according to jsperf https   jsperf com getelementsbyclassname-vs-queryselectorall 25

User · Answer

You could use this   jQuery fn extend       exists  function     return this length        if   selector  exists      do something

User · Answer

How about   function exists selector        return   selector  length     if  exists selector            do something     It s very minimal and saves you having to enclose the selector with     every time

User · Answer

I see most of the answers here are not accurate as they should be  they check element length  it can be OK in many cases  but not 100   imagine if number pass to the function instead  so I prototype a function which check all conditions and return the answer as it should be     fn exists     fn exists    function        return    this length  amp  amp   this 0  instanceof HTMLDocument    this 0  instanceof HTMLElement         This will check both length and type  Now you can check it this way     1980  exists      return false    1 2 3   exists      return false    name   stackoverflow   url   http   www stackoverflow com    exists      return false     nodeName   foo     exists      returns false    div   exists      return true     header   exists      return true   document  exists      return true    body   exists      return true

User · Answer

I had a case where I wanted to see if an object exists inside of another so I added something to the first answer to check for a selector inside the selector       Checks if an object exists     Usage              selector  exists         Or               selector  exists anotherSelector   jQuery fn exists   function selector        return selector   this find selector  length   this length

User · Answer

The reason all of the previous answers require the  length parameter is that they are mostly using jquery s     selector which has querySelectorAll behind the curtains  or they are using it directly    This method is rather slow because it needs to parse the entire DOM tree looking for all matches to that selector and populating an array with them   The   length   parameter is not needed or useful and the code will be a lot faster if you directly use document querySelector selector  instead  because it returns the first element it matches or null if not found   function elementIfExists selector      named this way on purpose  see below     return document querySelector selector        usage     var myelement   elementIfExists   myid      myfallbackelement    However this method leaves us with the actual object being returned  which is fine if it isn t going to be saved as variable and used repeatedly  thus keeping the reference around if we forget    var myel elementIfExists   myid       now we are using a reference to the element which will linger after removal myel getParentNode removeChild myel   console log elementIfExists   myid        null    console log myel      giant table lingering around detached from document    myel null     now it can be garbage collected      In some cases this may be desired   It can be used in a for loop like this      locally scoped myel gets garbage collected even with the break     for  var myel  myel   elementIfExist sel   myel getParentNode removeChild myel       if  myel    myblacklistedel  break    If you don t actually need the element and want to get store just a true false  just double not it     It works for shoes that come untied  so why knot here   function elementExists selector       return   document querySelector selector        usage     var hastables   elementExists  table        will be true or false    if  hastables          insert css style sheet for our pretty tables      setTimeOut function    if  hastables  amp  amp   elementExists   mytablecss                               alert  bad table layouts     3000

User · Answer

Is   contains   what you want   jQuery contains  container  contained   The   contains   method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument  whether it is a direct child or nested more deeply  Otherwise  it returns false  Only element nodes are supported  if the second argument is a text or comment node    contains   will return false  Note  The first argument must be a DOM element  not a jQuery object or plain JavaScript object

User · Answer

If you used  jQuery fn exists   function   return    this  length  gt  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  gt  0    if    exists selector         Alternatively  from the FAQ   if       myDiv   length        Do something        You could also use the following  If there are no values in the jQuery object array then getting the first item in the array would return undefined   if       myDiv   0         Do something

User · Answer

I stumbled upon this question and i d like to share a snippet of code i currently use     fn exists   function callback        var self   this      var wrapper    function                function notExists                    notExists prototype otherwise   function fallback                   if   self length                                            fallback call                                                  return new notExists                     if self length            callback call                   return wrapper      And now i can write code like this -       elem   exists function        alert   it exists       otherwise function        alert   it doesn t exist          It might seem a lot of code  but when written in CoffeeScript it is quite small     fn exists    callback  - gt      exists    length     callback call   if exists             new class        otherwise   fallback  - gt                          fallback call   if not exists

User · Answer

This plugin can be used in an if statement like if    ele  exist         DO WORK      or using a callback   Plugin     function          if     exist              extend               exist  function                     var ele  cbmExist  cbmNotExist                  if  arguments length                        for  x in arguments                            switch  typeof arguments x                                 case  function                                   if  typeof cbmExist     undefined   cbmExist   arguments x                                   else cbmNotExist   arguments x                                   break                              case  object                                   if  arguments x  instanceof jQuery  ele   arguments x                                   else                                       var obj   arguments x                                       for  y in obj                                            if  typeof obj y      function                                                 if  typeof cbmExist     undefined   cbmExist   obj y                                               else cbmNotExist   obj y                                                                                     if  typeof obj y      object   amp  amp  obj y  instanceof jQuery  ele   obj y                                           if  typeof obj y      string   ele     obj y                                                                                                            break                              case  string                                   ele     arguments x                                    break                                                                                     if  typeof cbmExist     function                         var exist    ele length  gt  0   true   false                      if  exist                            return ele each function i    cbmExist apply this   exist  ele  i                                                  else if  typeof cbmNotExist     function                             cbmNotExist apply ele   exist  ele                            return ele                                            else                           if  ele length  lt   1  return ele length  gt  0   true   false                          else return ele length                                                          else                       if  ele length  lt   1  return ele length  gt  0   true   false                      else return ele length                                     return false                                      fn extend               exist  function                     var args      this                    if  arguments length  for  x in arguments  args push arguments x                    return   exist apply    args                                      jQuery     jsFiddle  You may specify one or two callbacks  The first one will fire if the element exists  the second one will fire if the element does not exist  However  if you choose to pass only one function  it will only fire when the element exists  Thus  the chain will die if the selected element does not exist  Of course  if it does exist  the first function will fire and the chain will continue   Keep in mind that using the callback variant helps maintain chainability     the element is returned and you can continue chaining commands as with any other jQuery method   Example Uses  if    exist   eleID               DO WORK                      param as STRING if    exist     eleID             DO WORK                      param as jQuery OBJECT if      eleID   exist             DO WORK                      enduced on jQuery OBJECT    exist   eleID   function                      param is STRING  amp  amp  CALLBACK METHOD           DO WORK                 This will ONLY fire if the element EXIST          function                      param is STRING  amp  amp  CALLBACK METHOD           DO WORK                 This will ONLY fire if the element DOES NOT EXIST               eleID   exist function                      enduced on jQuery OBJECT with CALLBACK METHOD           DO WORK                 This will ONLY fire if the element EXIST             exist                                param is OBJECT containing 2 key value pairs  element   STRING  callback   METHOD     element    eleID       callback  function                   DO WORK                     This will ONLY fire if the element EXIST

User · Answer

selector   returns an object which has the length property  If the selector finds any elements  they will be included in the object  So if you check its length you can see if any elements exist  In JavaScript 0    false  so if you don t get 0 your code will run   if    selector   length        code in the case

User · Answer

With jQuery you do not need  gt 0  this is all you need   if    selector  length    With vanilla JS  you can do the same with   if document querySelector selector     If you want to turn it into a function that returns bool   const exists   selector   gt    document querySelector selector    if exists selector         some code

User · Answer

I have found if    selector  length     to be insufficient  It will silently break your app when selector is an empty object      var  target                  console log  target   target length       Console output     -------------------------------------       Object                1           proto    Object   My only suggestion is to perform an additional check for      if    isEmptyObject selector        selector  length        throw new Error  Unable to work with the given selector         I m still looking for a better solution though as this one is a bit heavy   Edit  WARNING  This doesn t work in IE when selector is a string     isEmptyObject  hello      FALSE in Chrome and TRUE in IE

User · Answer

I am using this    if     element   length  gt  0        the element exists in the page  you can do the rest          Its very simple and easy to find an element

User · Answer

A simple utility function for both id and class selector   function exist IdOrClassName  IsId      var elementExit   false    if  IsId        elementExit                IdOrClassName       length   true   false      else       elementExit                IdOrClassName       length   true   false        return elementExit      calling this function like bellow     document  ready function           btnCheck   click function           address is the id so IsId is true  if address is class then need to set IsId false     if  exist  address   true           alert  exist          else         alert  not exist

User · Answer

Try testing for DOM element  if      selector  0      do stuff

User · Answer

Use querySelectorAll with forEach  no need for if and extra assignment   document querySelectorAll   my-element   forEach  element    gt      element classList add  new-class          as the opposite to   const myElement   document querySelector   my-element    if  myElement      element classList add  new-class

User · Answer

Here is my favorite exist method in jQuery    fn exist   function callback        return   this  each function              var target     this            if  this length  gt  0  amp  amp  typeof callback      function                 callback call target                          and other version which supports callback when selector does not exist    fn exist   function onExist  onNotExist        return   this  each function             var target     this            if  this length  gt  0                if  typeof onExist      function                     onExist call target                           else               if  typeof onNotExist      function                     onNotExist call target                                        Example       foo  bar   exist      function                 Stuff when   foo  bar  exists            function                 Stuff when   foo  bar  does not exist

User · Answer

You can save a few bytes by writing   if    selector  0             This works because each jQuery object also masquerades as an array  so we can use the array dereferencing operator to get the first item from the array  It returns undefined if there is no item at the specified index

User · Answer

All answers is not working bullet proof to check existence of an element in jQuery  After many years of coding  only this solution does not throw any warnings about existance or not   if   selector  get 0        Do stuff     Or to bail instead in the beginning of your function   if    selector  get 0   return    Explained  In this case  you dont have to deal with zero   null lengths issues  This forces to fetch an element  not count them

User · Answer

I found that this is the most jQuery way  IMHO  Extending the default function is easy and can be done in a global extension file   x000D   x000D    fn exist   function      return   this length      console log     yes   exist     console log     no   exist    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt div id  yes  gt id   yes lt  div gt  x000D   x000D   x000D

User · Answer

Just check the length of the selector  if it more than 0 then it s return true otherwise false   For ID    if      selector   length              use this if you are using id to check           it exists     For Class    if      selector   length              use this if you are using class to check           it exists     For Dropdown   if      selector option   size            use this if you are using dropdown size to check        it exists

User · Answer

I m using this         fn ifExists   function fn          if  this length              fn this                           element   ifExists         function  this            this addClass  someClass   animate  marginTop 20  function   alert  ok                                       Execute the chain only if a jQuery element exist  - http   jsfiddle net andres 314 vbNM3 2

User · Answer

selector  length  amp  amp    Do something

User · Answer

Use the following syntax to check if the element actually exists using jQuery   let oElement       myElementClass    if oElement 0            Do some jQuery operation here using oElement   else          Unable to fetch the object

User · Answer

You can use this      if element exists if    selector   length      do something             if element does not exist if     selector   length      do something

User · Answer

There is an oddity known as short circuit conditioning   Not many are making this feature known so allow me to explain   lt 3   you can check if it isnt defined or if its falsy by using OR console log    selector      this value doesnt exist       or run the selector if its true  and ONLY true console log    selector   amp  amp   this selector is defined  now lemme do somethin        sometimes I do the following  and see how similar it is to SWITCH console log        return something only if its in the method name      string   THIS is a string        function   THIS is a function        number   THIS is a number        boolean   THIS is a boolean     typeof   selector       skips to this value if object above is undefined  typeof THIS is not defined in your search    The last bit allows me to see what kind of input my typeof has  and runs in that list   If there is a value outside of my list  I use the OR      operator to skip and nullify   This has the same performance as a Switch Case and is considered somewhat concise  Test Performance of the conditionals and uses of logical operators  Side note  The Object-Function kinda has to be rewritten  gt   lt   But this test I built was made to look into concise and expressive conditioning  Resources  Logical AND  with short circuit evaluation

User · Answer

There s no need for jQuery really  With plain JavaScript it s easier and semantically correct to check for   if document getElementById  myElement            Do something        If for any reason you don t want to put an id to the element  you can still use any other JavaScript method designed to access the DOM   jQuery is really cool  but don t let pure JavaScript fall into oblivion

User · Answer

I just like to use plain vanilla javascript to do this   function isExists selector     return document querySelectorAll selector  length gt 0

User · Answer

By default - No   There s the length property that is commonly used for the same result in the following way   if    selector  length    Here   selector  is to be replaced by the actual selector you are interested to find if it exists or not  If it does exist  the length  property will output an integer more than 0 and hence the if statement will become true and hence execute the if block  If it doesn t  it will output the integer  0  and hence the if block won t get executed

User · Answer

The input won t have a value if it doesn t exist  Try this     if   selector  val

User · Answer

You can check element is present or not using length in java script     If length is greater than zero then element is present if length is zero then    element is not present        These by Id if      elementid   length  gt  0         Element is Present   else        Element is not Present       These by Class if      elementClass   length  gt  0         Element is Present   else        Element is not Present

User · Answer

You can use   if    selector  is              Do something     A little more elegant  perhaps

User · Answer

The fastest and most semantically self explaining way to check for existence is actually by using plain JavaScript   if  document getElementById  element id             Do something     It is a bit longer to write than the jQuery length alternative  but executes faster since it is a native JS method   And it is better than the alternative of writing your own jQuery function  That alternative is slower  for the reasons  snover stated  But it would also give other programmers the impression that the exists   function is something inherent to jQuery  JavaScript would should be understood by others editing your code  without increased knowledge debt   NB  Notice the lack of an     before the element id  since this is plain JS  not jQuery

User · Answer

Inspired by hiway s answer I came up with the following     fn exists   function         return   contains  document documentElement  this 0         jQuery contains takes two DOM elements and checks whether the first one contains the second one   Using document documentElement as the first argument fulfills the semantics of the exists method when we want to apply it solely to check the existence of an element in the current document   Below  I ve put together a snippet that compares jQuery exists   against the   sel  0  and   sel  length approaches which both return truthy values for   4  while   4  exists   returns false  In the context of checking for existence of an element in the DOM this seems to be the desired result    x000D   x000D    fn exists   function     x000D      return   contains document documentElement  this 0     x000D      x000D     x000D    var testFuncs     x000D      function jq    return   jq 0      x000D      function jq    return   jq length     x000D      function jq    return jq exists       x000D       x000D       x000D    var inputs     x000D                   x000D          4     4    x000D            idoexist        idoexist     x000D            idontexist        idontexist    x000D       x000D     x000D    for  var i   0  l   inputs length  tr  input  i  lt  l  i       x000D      input   inputs i  1   x000D      tr     lt tr gt  lt td gt     inputs i  0      lt  td gt  lt td gt   x000D              testFuncs 0  input      lt  td gt  lt td gt   x000D              testFuncs 1  input      lt  td gt  lt td gt   x000D              testFuncs 2  input      lt  td gt  lt  tr gt    x000D         table   append tr   x000D      x000D  td   border  1px solid black   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  idoexist  gt  idoexist lt  div gt  x000D   lt table style gt  x000D   lt tr gt  x000D     lt td gt Input lt  td gt  lt td gt     sel  0  lt  td gt  lt td gt     sel  length lt  td gt  lt td gt   sel  exists   lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   lt script gt  x000D     x000D      fn exists   function     x000D      return   contains document documentElement  this 0     x000D      x000D     x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Yes   jQuery fn exists   function    return this length  gt  0     if    selector  exists             Do something     This is in response to  Herding Code podcast with Jeff Atwood

[javascript] Is there an "exists" function for jQuery?

Examples related to javascript

Examples related to jquery