If one of two elements exists, do something

JqueryExists

Jquery Problem Overview


I currently do this to check if one of two elements exists:

if ($(".element1").length > 0 || $(".element2").length > 0) {
  //do stuff...
}

Is there a better way to rewrite the same? I mean, is .length the same as .length > 0?

Jquery Solutions


Solution 1 - Jquery

if ($(".element1").is('*') || $(".element2").is('*')) {
    // code
}

EDIT (per comment) Select elements by multiple classes in one call:

if ($(".element1, .element2").is('*')) {
    // code
}

Solution 2 - Jquery

if ( $('#myDiv')[0] ) { //do something }

..works best!

Found here.

Solution 3 - Jquery

All jQuery elements have the .length property. You can just go:

if ($('img').length) // Implies: If this element exists..

http://jqueryfordesigners.com/element-exists/

Solution 4 - Jquery

!$.isEmptyObject($.find('#urId'))

this will return "true" if the element exists and False if not

cheers :)

Solution 5 - Jquery


See Extremely updated version of this plugin here! Now uses callback function so you can maintain chainability if you choose. Can completely replace if statement or can still be used within if statement


You could create a very simple jQuery plug-in for this, as such:

jsFiddle

(function($) {
    if (!$.exist) {
        $.extend({
            exist: function(elm) {
            	if (typeof elm == null) return false;
            	if (typeof elm != "object") elm = $(elm);
            	return elm.length ? true : false;
            }
        });
        $.fn.extend({
            exist: function() {
                return $.exist($(this));
            }
        });
    }
})(jQuery);

> USE

//	With ID 
$.exist("#eleID");
//	OR
$("#eleID").exist();

//	With class name
$.exist(".class-name");
//	OR
$(".class-name").exist();

//	With just tag // prolly not best idea aS there will be other tags on site
$.exist("div");
//	OR
$("div").exist();

> With your If statement

if ($(".element1").exist() || $(".element2").exist()) {
	...stuff...
}

Of course this plugin could be further extended to be much more fancy (handling multiple calls at once, creating non-existing elements based on a pram), but as it stand now, it does a very simple, very needed function ... Does this element exist? return True or False

jsFiddle

Solution 6 - Jquery

Just use .each().

$(".element1").each(function(){
  //Do Something here
}

Simple...

Solution 7 - Jquery

$.fn.exists = function(ifExists) {
	return this.length ? ifExists.call(this, this) : this;
};

usage:

$('.element1, .element2').exists(function(els) {
	// this and els refers to $('.element1, .element2')
});

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
QuestioneozzyView Question on Stackoverflow
Solution 1 - JquerymicahwittmanView Answer on Stackoverflow
Solution 2 - JqueryeozzyView Answer on Stackoverflow
Solution 3 - JqueryAaronView Answer on Stackoverflow
Solution 4 - JquerybharadwajView Answer on Stackoverflow
Solution 5 - JquerySpYk3HHView Answer on Stackoverflow
Solution 6 - JqueryAdriano PedroView Answer on Stackoverflow
Solution 7 - Jqueryuser3336882View Answer on Stackoverflow