jQuery select closest child element by class

Question

How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?

I want to dynamically fetch the text "TESTING" from that div within the overall parent div.

<div class='answer' id="overall">
      <div class='rating'>1</div>
      <div class='rating'>2</div> 
      <div class='rating'>3</div>
      <div class='rating'>4</div>
      <div class='rating selected'>TESTING</div>
</div>

<div class='answer' id="effort">
      <div class='rating'>1</div>
      <div class='rating'>2</div> 
      <div class='rating'>3</div>
      <div class='rating selected'>4</div>
      <div class='rating'>TESTING</div>
</div>

I tried to do this and it is blank.

$(document.getElementById('overall')).find('.rating selected').text();

Answer 1

Your code would work but your selector is wrong. It would be...

$(document.getElementById('overall')).find('.rating.selected').text();

Notice the dot and no space between rating and selected .

However, I think you are over complicating things...

$('#overall .selected').text();

Example...

 alert($('#overall .selected').text()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class='answer' id="overall"> <div class='rating'>1</div> <div class='rating'>2</div> <div class='rating'>3</div> <div class='rating'>4</div> <div class='rating selected'>TESTING - selected</div> </div> <div class='answer' id="effort"> <div class='rating'>1</div> <div class='rating'>2</div> <div class='rating'>3</div> <div class='rating selected'>4</div> <div class='rating'>TESTING - not selected</div> </div> 

Answer 2

$（'＃overall .rating.selected'）。html（）