Check if an element contains a specific child elem

Question

I have many divs which sometimes contain links. I want check whether or not they have a link. This is my attempt:

var container = $(this).closest('.content').find('.text');

    //Check if text contains a tags
    if(container+':has(a)'){
        alert('contain link'); 
    }
    else{
        alert('no link found');  //Alert "contain link" even if no link is found.
    }

By doing container.html() I can see the exact content of container including anchor tags, but my code above will always say that it cannot find the anchor tag.

Could someone tell me what I am doing wrong?

Answer 1

Change

if(container+':has(a)'){  

To

if(container.has('a').size()){  

container is an jquery object, not a selector string

Answer 2

Yours will work if you change it to

 if($(container+":has(a)").length > 0){

In docs

The supplied selector is tested against the descendants of the matching elements

Answer 3

You can use the length property of a selector to determine if any elements were found. Try this:

var $container = $(this).closest('.content').find('.text');

if ($('a', $container).length) {
    alert('Contains links'); 
}
else {
    alert('No links found');
}

Answer 4

Change to this:

if(container.find("a").length){ ...

container is a jquery object and .find() is a function of that object that finds elements within it. A length greater than 0 will mean it finds an anchor tag and it will evaluate to true.

Edit:

Also, to explain why your example isn't working. When you do container+':has(a)', you are doing a string concatenation which runs toString() on your object (converting it to "[object Object]"). So you end up with the string "[object Object]:has(a)" which will always evaluate to true.