Question

I am working on a project, i have two anchors in my View(for voting functionality),

I have a div inside which i am having a <ul> and in 3 <li> i am having anchor for upvote,vote count (in <h2>) and anchor downvote respectively

I want functionality that when i click on any anchor, the h2 html show the vote count, i’ve implemented the functionality but because of

i am unable to do this,
this is my View

<div class="voting" style="margin-left:20px;">
                                        <ul>
                                            <li class="addvote"><a href="#" class="voteAnswer" answerid="@answer.AnswerID" name="Voted">
                                           Up</a></li>
                                            <li class="votecounter">
                                                <h2>
                                                    @answer.AnswerLikes.Where(a => a.IsActive == true).Count()</h2>
                                            </li>
                                            <li class="subvote"><a href="#" class="voteAnswer" answerid="@answer.AnswerID" name="Voted">
Down</a></li>
                                        </ul>
                                    </div>

and this is my JS

$(".voteAnswer").click(function (event) {
            var answerid = $(this).attr('answerid');
            var name = $(this).attr('name');
            var id = $(this).attr('id');
            var output = $(this);

                $.ajax({
                    url: ResourceAjaxUrl.VoteUnvoteTheAnswer,
                    type: "POST",
                    data: JSON.stringify({ answerID: answerid }),
                    dataType: "html",
                    contentType: "application/json; charset-utf-8",
                    success: function (Result) {
                        alert("Voted");
                        //  $(output).html("Voted (" + Result + ")");
                        $(output).closest("li").find("h2").html(Result);
                        $(output).attr("name", "Voted");
                    },
                    error: function (msg) {
                        alert("Unable to Vote answer: " + msg);
                    }
                });
event.preventDefault();
            });

i have tried using $(output).closest("li").find(".votecounter") but its still not working

Answer 1

The UL is the closest common ancestor.

Try:

$(output).closest("UL").find(".votecounter")