CODEWITHSUNDEEP
javascriptjquery
mmcglynn
mmcglynn

Reputation: 7662

JQuery traversal problem

I am trying to select the DIV with the class 'container'.

<a href="#" class="playButton">Start</a>
<div class="overlay">
<div class="overlayClose">Close</div>              
    <div class="container">Foo</div>
</div>

Using variations of the js below, which fails. What is the smartest way to get this selection?

$('.playButton').click(function() {
   $('div').next('div').has('.container').css("background-color", "red");
});

Upvotes: 0

Views: 74

Answers (3)

Trevor
Trevor

Reputation: 13457

Or, if the 'container' div is not used elsewhere on the page, simply:

$('.playButton').click(function(){
   $('.container').css({'background-color':'#F00'});
});

Upvotes: 0

mway
mway

Reputation: 4392

This is probably neater:

$('.playButton').click(function(e) {
    $(this).next('.overlay').children('.container').css({ 'background-color': '#f00' });
});

Edited. Neal beat me to it with is indentation-proof reading, but I didn't want to leave an incorrect answer.

Upvotes: 0

Naftali
Naftali

Reputation: 146302

Try this:

$('.playButton').click(function() {
   $(this).next('.overlay')
                         .children('.container').css("background-color", "red");
});

Here is the fiddle: http://jsfiddle.net/maniator/F9dUN/1/

Upvotes: 2

Related Questions