How to check the existence of elements in jQuery?
My current code is as follows:
if ($(selector).length > 0) { // Do something }
Is there a more elegant way to solve this problem? Maybe plug-ins or features?
#1 building
I have a situation where I want to see if one object exists in another, so I added something to the first answer to check the selector in 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; };
#2 building
$(selector).length && //Do something
#3 building
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')}); } );
Chain execution only if jQuery element exists - http: //jsfiddle.net/andres_314/vbNM3/2/
#4 building
You can use this plug-in in the if statement of the if ($(ELE). Exist()) {/ * do work * /} class, or you can use if ($(ele. Exist()) {/ * do work * /}.
insert
;;(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' && 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 > 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 <= 1) return ele.length > 0 ? true : false; else return ele.length; } } else { if (ele.length <= 1) return ele.length > 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);
You can specify one or two callbacks. The first will trigger if the element exists, if the element does not exist the second will fire. However, if you choose to pass only one function, it will only fire if the element exists. Therefore, if the selected element does not exist, the chain will die. Of course, if it does, the first function is triggered and the chain continues.
Keep in mind that using callback variants helps keep you linkable - returning this element, you can continue linking commands like any other jQuery method!
Example use
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 && CALLBACK METHOD /* DO WORK */ /* This will ONLY fire if the element EXIST */ }, function() { // param is STRING && 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 */ } })
#5 building
You can use this:
jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){/*do something*/}