如何使用jQuery在div ID内查找类？

Question

When the user click the like button, I am trying to capture the number in the class 'badge'. Here's what I have in my JS so far where I find the div id containing the elements but I'm having trouble going down and finding .badge within this div:

//Like annotation JS
  $('.liking').click(function (e){
  e.preventDefault();
  div = $(this).closest('div').attr('id');
  console.log(div);

})
//End of liking annotation JS


<div id = 'div1'>
<% @annotations.each do |annotation| %>
    <p><strong>Name</strong>
    <p class = 'lead' style = 'font-size: 14px; line-height: 23px;'>
        <%= annotation.annotation %>
    </p>
    <p>
        <small>
            <span class = 'badge' style = 'font-size: 12px;'>0</span> &nbsp;
            <a href = "#" class = 'liking'>
                Like
            </a>
        </small>
    </p>
    <hr class="featurette-divider" style = 'margin:15px;'>
<% end %> <!-- End of verse annotations -->
</div>

Answer 1

You don't necessarily need the ID, you can use the find method, you can also use siblings method.

$('.liking').click(function (e){
  e.preventDefault();
  var $badge = $(this).closest('div').find('.badge');      
  // var $badge = $(this).siblings('.badge');
  console.log($badge.text());
})

Answer 2

badge = $(this).closest('div').find('.badge');

但是在您的HTML中， badge总是在liking之前就出现了，因此您可以执行以下操作：

badge = $(this).siblings('.badge');

Answer 3

Try this code:

var text = $(this).siblings('span.badge').text();
var number = parseInt(text, 10);

Answer 4

Tried this?

$('.liking').click(function (e){
  e.preventDefault();
  div = $(this).closest('div').find('.badge');
  console.log(div);

})

here is working link http://jsfiddle.net/ASN7c/

Answer 5

Try This Code

$('.liking').click(function (e){
e.preventDefault()
var div1 =  $(this).closest('div').find('.badge'); 
alert(div1.text());

})

See Demo

Answer 6

Will .badge always be the parent element of the .liking link?

If so, you can simply do:

 $('.liking').click(function (e){
  e.preventDefault();
  var $badge = $(this).prev();
  console.log($badge.text());
})

Check out http://jsfiddle.net/2c9xz/