Jquery add class if a element exists within div

Question

I want Jquery to add a class .pointer to .staff-container if <a href=""> exists within .staff-picture .

My Jquery:

if($('.staff-container').find('.staff-picture').closest('a').length) {
    $(this).addClass('pointer');
}

No class is being added with the above jquery, what am I doing wrong?

---

---

My Css:

.pointer {
    cursor:pointer !important;
}

My HTML:

<div class="teachers">
    <div class="span12">
        <div class="scroll transparent">
            <div class="staff-outer-container">
                <div class="staff-container">
                    <div class="staff">
                        <div class="staff-picture">
                            <a href="http://ahmedmathematics.weebly.com/index.html" target="_blank"><img src="img/people/teachers/ahmed.png" /></a>
                        </div>
                        <p><span class="bold">Mr. Ahmed</span><br />
                        Ext. 13417<br />
                        Room 417/323<br />
                        <a href="mailto:Ahmed@wcskids.net">Ahmed@wcskids.net</a></p>
                    </div>
                </div>
                <div class="staff-container">
                    <div class="staff">
                        <div class="staff-picture">
                            <img src="img/people/teachers/aiello.png" />
                        </div>
                        <p><span class="bold">Mr. Aiello</span><br />
                        Ext. 13328<br />
                        Room 328/323<br />
                        <a href="mailto:ASusan@wcskids.net">ASusan@wcskids.net</a></p>
                    </div>
                </div>
                <div class="staff-container">
                    <div class="staff">
                        <div class="staff-picture">
                            <a href="http://www.mraiosa.com/class/Home.html" target="_blank"><img src="img/people/teachers/aiosa.png" /></a>
                        </div>
                        <p><span class="bold">Mr. Aiosa</span><br />
                        Ext. 13419<br />
                        Room 419/323<br />
                        <a href="mailto:BAiosa@wcskids.net">BAiosa@wcskids.net</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You can do this :

$('.staff-picture a').closest('.staff-container').addClass('pointer');

I hope the logic is obvious from the code.

Answer 2

I would first iterate through the .staff-container divs, then use a conditional to determine which ones have an a tag using the this object as context:

//Goes through all the .staff-picture divs
$('.staff-container').each(function(){

    //If the a tag exists within the current .staff-picture (returned object isn't undefined)
    if($('a', this).html() != undefined){

        //Add the class if a exists
        $(this).addClass('pointer'); 
    }

});

http://jsfiddle.net/y9ZKG/

EDIT

Sorry, I meant staff-container, not staff-picture. But, either will work.

2nd EDIT

Also, if you are curious why your original methodology wasn't working, it is because the conditional you use (the first if ) does not instantiate the this object. That is, this does not exist inside your function.

Answer 3

Try this:

var $selector = $('.staff-container');
if($selector.find('.staff-picture').has('a')) {
    $selector.addClass('pointer');
}

Answer 4

$.closest() traverses up not down the tree, therefore you are not finding anything. see the jQuery API

Answer 5

I like to approach these types of problems with "reverse" logic:

$('.staff-picture a').parent().parent().parent().addClass('pointer);

There's probably a way to "choose" your staff-container parent, but if the DOM structure doesn't change, this works great.

This starts by selecting all the a-links and then ONLY applies those up which uses jQuery's powerful selection code. It doesn't rely on tests with if-statements.