确定在jquery中一组相似元素中单击了哪个元素

Question

I have an HTML page which contains posts.

Post is defined by:

 <div class="post"> <p>...</p> <a href="#" class="post-react">Like</a> <input type="hidden" name="post-id" value="[postid]"> </div> 

A single page can contain many such posts. When I click "Like", how do I detect which post element's "Like" button was clicked?

I tried this in jquery:

 $(function() { $('.post-react').bind('click', function() { $.getJSON('...', { post_id: $('input[name="post-id"]', this).val() }, function(data) { //something }); return false; }); }); 

Answer 1

$('input[name="post-id"]', this) is looking for an input that is a descendant of this but the input is not inside the <a> , it is a sibling

Use next() or siblings() instead or traverse to the post and use find()

post_id: $(this).next().val()
// OR
post_id: $(this).siblings('input[name="post-id"]').val()
// OR
post_id: $(this).closest('.post').find('input[name="post-id"]').val()

Note that bind() is a very old method that is superseded by on()