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:[email protected]">[email protected]</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:[email protected]">[email protected]</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:[email protected]">[email protected]</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Are you sure you need this !important ? If your CSS code is well managed you very rarely need this. — Denys Séguret
– Denys Séguret, Commented May 13, 2013 at 14:48

Denys Séguret · Accepted Answer · 2013-05-13 14:45:32Z

8

You can do this :

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

I hope the logic is obvious from the code.

answered May 13, 2013 at 14:45

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smilebomb · Accepted Answer · 2013-05-13 15:00:15Z

3

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.

edited May 13, 2013 at 15:00

answered May 13, 2013 at 14:53

smilebomb

5,5239 gold badges54 silver badges86 bronze badges

1 Comment

Pepelius Over a year ago

In my case pretty similar to the question here, this worked just perfectly! Had to dig up <br /> tags from divs and set a custom class with line-height attribute for a more fixed view of buttons.

palaѕн · Accepted Answer · 2013-05-13 14:45:39Z

1

Try this:

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

answered May 13, 2013 at 14:45

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

2 Comments

ryanulit Over a year ago

You don't even need the if I believe. You can just do $('.staff-container').find('.staff-picture').has('a').addClass('pointer')

palaѕн Over a year ago

@ryanulit That would add the class to staff-picture not staff-container

Hoffmann · Accepted Answer · 2013-05-13 14:47:52Z

1

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

answered May 13, 2013 at 14:47

Hoffmann

1,0829 silver badges28 bronze badges

1 Comment

John Kroetch Over a year ago

Oh, if that's the case then you can modify my answer below to be as follows: $('.staff-picture a').closest('staff-container').addClass('pointer);

John Kroetch · Accepted Answer · 2013-05-13 14:50:37Z

0

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.

answered May 13, 2013 at 14:50

John Kroetch

1,1538 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery add class if a element exists within div

5 Answers 5

Comments

EDIT

2nd EDIT

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

EDIT

2nd EDIT

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related