使用最接近的表單對象

Question

最近，我正在審查另一位程序員編寫的客戶端代碼。我對用於獲取表單對象的代碼感到驚訝。

HTML的登錄表單

<form id="frm_login" action=""> 
    <input type="text" name="username" id="username"> 
    <input type="password" name="pwd" id="pwd"> 
</form> 

他用下面的代碼獲取表單對象

$frm = $("input[type='password']").closest("form"); 

但對於越來越表單對象簡單的代碼，我更喜歡：

$frm = $("#frm_login"); 

是否有任何理由使用最接近g以上情形中的表單對象？

我真的很想知道是否有任何性能問題。

Answer 1

元素的id應該是唯一的。如果頁面上有單個表單，則不需要使用最接近的方式將其與其父級相關聯。如果表單沒有id，它會更有意義。通過ID獲取表格看起來更加直接和快速。

如果有多個形式和一個必須獲得元素存在的形式，然後使用最接近的意義。這可以通過下面的例子來理解。

Live Demo

的Html

<form id="frm_login1" action=""> 
    <input type="text" name="username" id="username1" /> 
    <input type="password" name="pwd" id="pwd1"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" class="myInputClass" /> 
      </td> 
     </tr> 
    </table> 
</form> 
<form id="frm_login2" action=""> 
    <input type="text" name="username" id="username2"> 
    <input type="password" name="pwd" id="pwd2"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" class="myInputClass" /> 
      </td> 
     </tr> 
    </table> 
</form> 

的Javascript

$("input[type='password']").closest("form").each(function(){ 
    alert($(this).find('.myInputClass').val()); 
}); 

Answer 2

的人說，如果你有ID，無需使用最接近獲取父窗體。並使用id更快。

然而，在某些情況下，您需要使用最接近的表單來獲取表單，例如，如果您編寫一個通用函數來驗證每個表單中的每個密碼輸入，在這種情況下，您不喜歡通過ID和搜索其CHILDES passwordfields防止自動提交，所以我猜是誰寫的代碼的傢伙，是這樣做的（這驗證密碼前提交的函數）

$("input[type='password']").each(function(){ 
    $frm = .closest("form"); 
    $frm.submit(function(event){ 
     if(not valid password){ 
      ...... 
      return false; 
     } 
    }); 

}); 

Answer 3

如果頁面上單一的形式則沒有需要使用最接近的方式將其與其父母相關聯。如果表單沒有id，它會更有意義。通過ID獲取表格看起來更加直接和快速。

但是Closest()方法非常酷且非常有用，特別是當您開始處理事件委託時，事件在節點樹中的更高級別被捕獲的事件比觸發事件的元素更高。

closest()方法在DOM樹中搜索這些元素及其祖先，並從匹配元素構造一個新的jQuery對象。