JQuery Parent().Next Issue

Question

Here is what I have. I have tried several things but I can't figure out what I am doing wrong...

<div class="VoteControls" runat="server" visible='<%# User.Identity.IsAuthenticated %>'>
    <img style="cursor: pointer; cursor: hand;" src='<%# (bool)Eval("skull") ? "images/skull.png" : "images/skull-bw.png" %>' alt="Vote Down" class="votedown" title='<%# Eval("entry.ID") %>' />
    <img style="cursor: pointer; cursor: hand;" src='<%# (bool)Eval("heart") ? "images/heart.png" : "images/heart-bw.png" %>' alt="Vote Up" class="voteup" title='<%# Eval("entry.ID") %>' />
</div>

And the JQuery:

      $(document).ready(function() {
            $(".voteup").click(function() {
                var id = $(this).attr("title");
                var userID = $("HiddenFieldUserID").val();
                var skullButton = $(this).parent().closest('.votedown');
                alert(skullButton.attr("src"));
                registerUpVote("up", id, $(this), skullButton, userID);
            });
            $(".votedown").click(function() {
                var id = $(this).attr("title");
                var userID = $("HiddenFieldUserID").val();
                var heartButton = $(this).parent().closest('.voteup');
                alert(heartButton.attr("src"));
                registerDownVote("down", id, heartButton, $(this), userID);
            });
        });

The goal is when a .voteup img is clicked, to find the corresponding .votedown img in the same VoteControls div. The div above is part of a DataList, so there will be a bunch of these on a page.

So the part that isn't working is:

var skullButton = $(this).parent().closest('.votedown');

Answer 1

You're misunderstanding the closest method, which finds the innermost parent of the element.

You need to write $(this).siblings('.votedown').