如何获得父类的最接近的表单元素。 jQuery

我想添加投票按钮到我的博客评论。我通过这样的每条评论循环：如何获得父类的最接近的表单元素。 jQuery

.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;') &#9650; 
          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>

来源

2014-11-13 Youngin

那是什么奇怪的符号？ – Pointy

如果您发布HTML – Huangism

的生成块，请显示示例输出html而不是服务器代码，这将会很有帮助。它似乎没有'voteUp'在表格内以 – charlietfl

尝试使用儿童，而不是最近。 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){ 

     }); 
    }); 
});

来源

2014-11-13 16:59:29 paulgv

.children（）似乎没有找到任何表单并提交没有数据的ajax调用。 – Youngin

你可以在这里粘贴一些生成的HTML吗？这将使它更容易调试你的脚本！谢谢。 – paulgv

我刚更新问题以包含html输出。 – Youngin

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

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

这将选择具有窗体横向类的下一个元素，只有那个。

下面是文档 - 看看它是你需要的。 http://api.jquery.com/next/

来源

2014-11-13 17:12:01 ggilberth

试过使用。next（）并返回页面上第一条评论的表单。点击任何.voteUp按钮始终提交表单作为第一条评论。我认为问题是$（this）总是作为第一个具有该类名称的div的引用。 – Youngin

'next（）'寻找兄弟，表单是一个后代而不是兄弟姐妹 – charlietfl

所以主要问题是你在DOM树中错误的方向遍历。

closest()开始与当前的选择并查找树的祖先，但你是想寻找后代。

只需使用的find()代替closest()

参考文献：

closest() API docs

find() API docs

来源

2014-11-13 18:38:48 charlietfl

如何获得父类的最接近的表单元素。 jQuery

回答

相关问题