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");

在上面的场景中，有没有理由使用最接近的形式对象？

我真的想知道是否有任何性能问题。

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密码字段可以防止自动提交，所以我猜这个编写代码的人正在这样做（一个在提交之前验证密码的函数）

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

});

Answer 3

如果页面上有单个表单，则无需使用最接近的表单将其与其父表单相关联。如果表单没有id，那将更有意义。通过id获得形式似乎更直接，更快。

但是Closest()方法非常酷且非常有用，特别是当您开始处理事件在节点树中被捕获到比触发事件的元素更高级别的事件委托时。 / p>

closest()方法在DOM树中搜索这些元素及其祖先，并从匹配元素构造一个新的jQuery对象。

使用最近的获取表单对象

3 个答案: