How can I check the existence of an element in jQuery?
The current code that I have is this:
if ($(selector).length > 0) {
// Do something
}
<
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.
$.fn.exists = function() {
return $.contains(document.documentElement, this[0]);
}
var testFuncs = [
function(jq) { return !!jq[0]; },
function(jq) { return !!jq.length; },
function(jq) { return jq.exists(); },
];
var inputs = [
["$()",$()],
["$(4)",$(4)],
["$('#idoexist')",$('#idoexist')],
["$('#idontexist')",$('#idontexist')]
];
for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
input = inputs[i][1];
tr = "" + inputs[i][0] + " "
+ testFuncs[0](input) + " "
+ testFuncs[1](input) + " "
+ testFuncs[2](input) + " ";
$("table").append(tr);
}
td { border: 1px solid black }
#idoexist
Input !!$(sel)[0] !!$(sel).length $(sel).exists()