Question

Trying to write a conditional with jQuery that basically states, if div.gathering does not contain a.cat-link then do the following. I have tried the following but it doesn’t seem to work. Can anyone shed some light on this?

if($("div.gathering:contains('a.cat-link')")){
    $(".gathering").append("<a href='#"+data[i]["categories"][0]["category_id"]+"div' class='cat-link' id='"+data[i]["categories"][0]["category_id"]+"' rel='external'>"+data[i]["categories"][0]["category_name"]+"<br />");
}

Answer 1

How about this :

if($("div.gathering").find("a.cat-link").length == 0){
  // Conditional statement returned TRUE
}

jQuery selectors return arrays of objects that matched the given selector. This is why we use the length property.

The method that you used – $("div.gathering:contains('a.cat-link')")
would return an empty array and when testing against any object that actually exists (even if it is an empty array) JavaScript will return true.

Example –

var nateArr = []; 
if (nateArr){
  // Do the dishes...
}else{
 // Eat some waffles...
}

If you test this for yourself you will never stop washing those dishes because even though the nateArr contains zero elements it still exists therefore the conditional statement will always return true.
_{And your fingers will go all wrinkly}