if-not condition fails (jQuery)

Question

http://jsbin.com/zexix/1/

$(function() {

    if ( !$(".first.last") ) {
      console.log("div with both first and last classes does not exists")
    } else {
      console.log("it exists");
    }

});

I want to check if a div with both first and last classes DOES NOT exist, but the check fails.

Answer 1

You need to check the number of elements found, as jQuery returns an empty collection in the event of no elements being found (which evaluates to a truthy value in the if statement):

if ( !$(".first.last").length )

I'd suggest testing against 0 explicitly, rather than relying on a falsey value, though:

if ( $(".first.last").length === 0 )

Answer 2

there are two ways:

1. check the length:

if ( !$(".first.last").length ) { // check the length if none returns 0 == false

2. check the visibility:

if ( !$(".first.last").is(':visible') ) { // returns boolean true/false

Answer 3

You can simplify this by checking the first object that is returned from JQuery:

if (!$(".first.last")[0]){
    console.log("div with both first and last classes does not exists");
} else {
  console.log("it exists");
}