如何获取最接近父类的表单元素.jQuery

How to get closest form element of parent class. jQuery

本文关键字：父类 表单 元素 jQuery 最接近 何获取 获取      更新时间：2023-09-26

我正试图在博客评论中添加投票按钮。我循环浏览每个评论，如下所示：

.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){
        }); 
    });
});

问题是，无论单击哪个voteUp按钮，它总是从页面上的第一条评论提交表单。我知道这是因为在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>

您可以尝试使用.next（）方法。

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

这将选择下一个具有水平类形式的元素，并且仅此而已。

这是文档-看看它是否是您所需要的。http://api.jquery.com/next/

因此，主要问题是在DOM树中以错误的方向遍历。

closest()从当前选择器开始，在树中查找祖先，但您希望查找后代。

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

参考文献：

关闭（）API文档

find（）API文档

尝试使用子项而不是最近的项。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){
        }); 
    });
});
相关文章：