如何獲取父類的最接近表單元素。 jQuery的

Question

我試圖在我的博客評論中添加投票按鈕。 我正在這樣循環瀏覽每個評論：

.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>

然后使用jQuery，我試圖提交作為被單擊按鈕的子級的表單。

$(".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){

        }); 
    });
});

問題在於，無論單擊哪個votUp按鈕，它始終從頁面上的第一條注釋提交表單。 我知道這是因為在jQuery $（this）== this [0]中，但是我不確定還有哪些其他選項可用來引用單擊的對象。 有人知道我該如何獲取單擊按鈕的子窗體？

這是html輸出的樣子：

<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

您可以嘗試使用.next（）方法。

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

這將選擇帶有水平窗體類的下一個元素，僅此而已。

這里是文檔-看看是否正是您所需要的。 http://api.jquery.com/next/

Answer 2

嘗試使用孩子代替最近的孩子。 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

因此，主要問題是您在DOM樹中的移動方向錯誤。

closest()從當前選擇器開始，並在樹中查找祖先，但您想查找后代。

只需使用find()而不是closest()

參考文獻：

最近的API文檔

find（）API文檔