Question

I have a vote button I created that is contained within a .vote_div. 2 parts: .vote_num for the vote total, and .vote for the vote button. The page has a list of items so I need to make sure when the user clicks .vote, it changes the corresponding .vote_num + 1.

My JS function worked when the .vote actually was the total votes, but now I am seperating the two. How do I grab the right .vote_num on the .vote click?

Thanks!

<script>
$(".vote").click( function() {
    var votes = $(this).attr('votes');
    $.post(
        '{% url vote %}', {
            "id":this.id,
    }, function(data) {});
    this.className = "voted";
    $(this).text(parseInt(votes) + 1);
    return false;
});
</script>


   <div class="vote_div">
    <span class="vote_num" votes='{{host.num_votes}}'>{{host.num_votes}}</span>
    <span class="vote" id="{{host.user.id}}">Vote</span>
   </div>

EDIT & SOLUTION:

Got it working using $(this).parent() :

<script>
$(".vote").click( function() {
    var votes = $(this).parent().find('.vote_num').attr('votes');
    $.post(
        '{% url vote %}', {
            "id":this.id,
    }, function(data) {});
    this.className = "voted";
    votes = parseInt(votes) + 1;
    $(this).parent().find('.vote_num').text(votes);
    return false;
});
</script>

Answer 1

try:

var votes = $(this).parent().find('.vote_num').attr('votes');

It goes to the parent of the clicked div then looks for an element with class vote_num then grabs the votes attributes.

@James answer should work, but this should give you a little more freedom to rearrange the two divs and add other elements so long as they share the parent.

To be even more robust you could do (note the ‘s’ on “parents”)

var votes = $(this).parents('.vote_div').find('.vote_num').attr('votes');

This will allow the elements to be nested arbitrarily deep as long as they only have a single parent with a class of `vote_div’.

See: http://api.jquery.com/parent/ , http://api.jquery.com/parents/ , and http://api.jquery.com/find/