CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
parameter
parameter

Reputation: 904

jQuery select closest child element by class

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();

Upvotes: 0

Views: 2032

Answers (2)

Turnip
Turnip

Reputation: 36742

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>

Upvotes: 2

Taplar
Taplar

Reputation: 24965

$('#overall .rating.selected').html()

Upvotes: 1

Related Questions