如何獲得父類的最接近的表單元素。 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

回答

相關問題