Question

   <p class="align-with-aes">
               <a class="with-icon manage-link active" href="#">
                   Manage Reference
               </a>
           </p>

    <form method="post" class="updateForm hide" novalidate="novalidate">                                                                                                           
       <p class="align-with-aes">
         <a class="with-icon add-new-line" id="add-line" href="#add-new-line">
            <i class="icon-add-inv"></i>Add new Reference
         </a>
       </p>
       <div class="row ref-update-button">
         <div class="span6">
            <button class="submitReference loadRef btn" id="submitReference"><i class="icon-submit"></i>Submit Reference</button>
         </div>
      </div>
    </form>

jquery的

    $( ".manage-link" ).click(function() {
        $(this).parent().closest('form').removeClass('hide');
    });

在这里，当我点击具有班级名称＆＃34; manage-link＆＃34; 的链接时，我想获得最接近的表格这不起作用。我在这做错了吗？

Answer 1

该表单不是点击元素的父级：

$(this).closest('p').siblings('form').removeClass('hide');

使用.closest()代替.parent()，因为如果在任何情况下你的标记都会被更改（如果现有的elems包含在其他元素中，例如span / strong）你就不会＃39不必担心。

使用.siblings()，因为点击元素的父级是兄弟。

Answer 2

由于您的链接和表单不在DOM树的同一部分，您可以进行全局$('form')搜索。大多数其他解决方案不会容忍将来对DOM结构的更改。

e.g。

$('form').removeClass('hide')

更好的选择是：

1）如果您想在页面上使用多个表单，请添加围绕两个分支的父div并使用closest()来获取该元素，然后find()表单在其中。

<div class="formwrapper">
    <p class="align-with-aes"> <a class="with-icon manage-link active" href="#">
        Manage Reference
        </a>
    </p>
    <form method="post" class="updateForm hide" novalidate="novalidate">
       ...
    </form>
<div>

并使用

$(this).closest('.formwrapper').find('form').removeClass('hide');

或 2）向链接添加标识信息，因此它知道相关表单是什么。在此示例中，我添加了一个包含选择器的data-form=".updateForm"属性：

<div class="formwrapper">
    <p class="align-with-aes"> <a class="with-icon manage-link active" href="#" data-form=".updateForm">
        Manage Reference
        </a>
    </p>
    <form method="post" class="updateForm hide" novalidate="novalidate">
       ...
    </form>
<div>

并使用：

$($(this).data('form')).removeClass('hide');

Answer 3

尝试：

  $( ".manage-link" ).click(function() {
        $(this).closest('p').siblings('form').removeClass('hide');
    });

这可能有用！

Jquery选择最接近的Form元素并删除Class

3 个答案: