How to get closest form element of parent class. jQuery

Question

I am trying to add vote up buttons to my blog comments. I am looping through each comment like this:

.row
    for comment in Comments
        .row
            p #{comment}
            .votecell(style='width:30px;float:left;margin-left: 15px;')
                .voteUp(id='#{comment.id}', style='margin-bottom: -17px;') ▲
                            form.form-horizontal(id='voteUp', enctype="multipart/form-data", method='POST')
                                input(type='hidden', name='_csrf', value=_csrf)
                                input(type='hidden', name='commentID', value='#{comment.id}')
                                <br>

Then using jQuery I am trying to submit the form that is a child of the button that was clicked.

$(".voteUp").click(function () {
    var form = $(this).closest(".form-horizontal")
    $(function(){
        $.ajax({
            url: '/voteUp', //the URL to your node.js server that has data
            type: 'POST',
            data:  form.serialize()
        }).done(function(data){

        }); 
    });
});

The problem is it always submits the form from the first comment on the page no matter which voteUp button is clicked. I know this is because in jQuery $(this) == this[0], but I am unsure what other options are available to reference the clicked object. Anyone know how I can grab the child form of the clicked button?

Here is what the html output looks like:

<div id="5463ce6bd6e5e5d403e80b3f" style="margin-bottom: -17px;" class="voteUp">
    ▲
    <form enctype="multipart/form-data" method="POST" class="form-horizontal">
        <input type="hidden" name="_csrf" value="4JbLbnEcRvq7ZuAhpZCXavMq7JW/vnIZlxW/o=">
        <input type="hidden" name="commentID" value="5463ce6bd6e5e5d403e80b3f">
    </form>
</div>

Answer 1

You could try using the .next() method.

$('.voteUp').next('.form-horizontal')

That would select the next element with the form-horizontal class and only that.

Here's the documentation - see if it's what you need. http://api.jquery.com/next/

Answer 2

Try using children instead of closest. http://jsfiddle.net/hLraqdq1/

$(".voteUp").click(function () {
    var form = $(this).children(".form-horizontal");
    $(function(){
        $.ajax({
            url: '/voteUp', //the URL to your node.js server that has data
            type: 'POST',
            data:  form.serialize()
        }).done(function(data){

        }); 
    });
});

Answer 3

So the main issue is you are traversing in the wrong direction within the DOM tree.

closest() starts with current selector and looks up the tree for ancestors but you are wanting to look for descendents.

Just use find() instead of closest()

References:

closest() API docs

find() API docs