jQuery: how to do something only if element exist?

Question

I'm new to jQuery and i think this question was answered many times. But i can't suggest how to find it. While writing jQuery code, i often write constructions where selector is repeated:

if( $( ".someclass .someclass #someid" ).filter( ":visible" ) )
{
  $( ".someclass .someclass #someid" ).filter( ":visible" ).click();
  // This must be executed only if element was found.
  return;
}
// This must be executed only if first element not found
if( $( ".someotherclass #someotherid" ).filter( ":hidden" ) )
{
  $( ".someotherclass #someotherid" ).filter( ":hidden" ).show();
  return;
}

As you can see, selector text is repeated. Is it any way to re-use result of last matched selector inside "if()"? For example, something like:

if( $( ".someclass .someclass #someid" ).filter( ":visible" ) )
{
  $( ":last-result" ).click();
  return;
}
if( $( ".someotherclass #someotherid" ).filter( ":hidden" ) )
{
  $( ":last-result" ).show();
  return;
}

this might help: http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery — Kevin B, Apr 05 '13 at 16:15

Denys Séguret · Accepted Answer · 2013-04-05T16:18:13.750

3

Simply don't test, this won't make any error if there is no matching element :

$( ".someclass .someclass #someid:visible").click();

This being said, as you can only have one element with a given id, you probably should use

$("#someid:visible").click();

Now, supposing you really want to do a test, then you may use

$("#someid:visible").each(function(){
     var $element = $(this);

     // use $element

});

Another basic solution is to cache your element before the test :

 var $element = $("#someid");
 if ($element.is(":visible")) {
     // use $element
 }

edited Apr 05 '13 at 16:18

answered Apr 05 '13 at 16:11

Denys Séguret

372,613
87
782
758

This was my first fought :). Unfortunately, in many cases i need to click/show/hide **and** do something else. For example, in my code sample - return from method. Or write something to log. Or whatever. – grigoryvp Apr 05 '13 at 16:13
It's not clear what you want but you can use `this` in most cases if you use each. – Denys Séguret Apr 05 '13 at 16:13
@Kevin Sorry, i can't understand. If i add it to next line after "click" - it will execute if element is visible **and** if it's not visible. And it's common to do logic like "if something is visible - hide and return. Than check if something else if not visible, if so - show and return. Finally, check some element has text. If so, clear and return." – grigoryvp Apr 05 '13 at 16:16
Yes, something like temporary variable. Does jQuery provides some shortcut to it like "last-match"? – grigoryvp Apr 05 '13 at 16:19
No, that wouldn't really make sense. If you need to use a value more than once, declare a variable. See the various solutions in my answer. – Denys Séguret Apr 05 '13 at 16:21

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

If you really want to do something only if element exist

$('element').length == 0; // no element found

By using the .length property we can test whether an element exists, or whether it has been found in the page.

jQuery: how to do something only if element exist?

2 Answers2