lomse
lomse

Reputation: 4165

Check if an element contains a specific child element

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?

Upvotes: 8

Views: 13353

Answers (4)

Vitaly  Muminov
Vitaly Muminov

Reputation: 1952

Change

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

To

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

container is an jquery object, not a selector string

Upvotes: 1

Smern
Smern

Reputation: 19066

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.

Upvotes: 9

Suresh Atta
Suresh Atta

Reputation: 121998

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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');
}

Upvotes: 1

Related Questions