JS: Click one div, change another div value

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

<scri开发者_如何学Pythonpt>
$(".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>

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/

if you have multiple class with vote, maybe you should use each()

$(".vote").each(function () {
   var current = $(this);
   current.click = function  () {
     // the rest of your function 
   }

})

Assuming I've understood the question correctly, and also assuming that your vote_num element is always the first element in the vote_div element:

var votes = $(this).siblings().eq(0).attr("votes");

Put this inside your click event handler will get the votes attribute from the first sibling element of the clicked element.

You can make this simpler if you are sure the element in question will always be directly before the clicked element:

var votes = $(this).prev().attr("votes");

var votes = $(this).attr('votes');

'votes' does not belong to class 'vote', it belongs to class 'vote_num'

so the line should be

var votes = $(".vote_num").attr('votes');

$('.vote').click(function(){
    var $vote_num_obj  = $(this).parent().find('.vote_num');
    var new_vote_num   = parseInt($vote_num_obj.attr('votes'))+1;

    $vote_num_obj.attr('votes', new_vote_num);
    $vote_num_obj.html(new_vote_num);
});

Put this script inside $('document').ready(function(){ ..here.. });

I suggest to change votes attribute of your span.vote_num to data-votes and change also the jquery attribute selector, this way it will be standard compliant.