将ID动态添加到页面上多个表单之一的元素中

Question

如果我的标题有点混乱，我道歉。我想不出一个好的方法来命名它。

不管怎样，我在找一些jQuery方面的帮助。

我有一个页面，有3个表单。每个表单中的所有表单字段都会预先填充值，并且默认情况下处于禁用状态。

每个表单都有一个"edit“链接(都附加了相同的类)，单击该链接将删除disabled属性，显示保存和取消按钮，并将焦点放在第一个输入字段上。当我硬编码所有我需要的ID时，我可以自己完成这项工作。但这对我的情况真的是行不通的。

每个表单之间唯一的唯一标识符是表单标记的ID。

我正在尝试做的是，当页面加载时，我想向编辑链接添加一个ID，并将表单ID附加到新创建的编辑链接的ID。

下面是一个非常基本的代码示例，展示了我正在使用的内容：

<form id="form-1">
  <a class="edit">Edit</a>
  ...
</form>
<form id="form-2">
  <a class="edit">Edit</a>
  ...
</form>
<form id="form-3">
  <a class="edit">Edit</a>
  ...
</form>

我希望动态地为每个编辑链接添加一个ID，而不必在html中显式设置。我想添加一个ID "edit-form ID"，其中form ID是该表单的ID。

所以在页面加载后，我希望表单看起来像这样：

<form id="form-1">
  <a class="edit" id="edit-form-1">Edit</a>
  ...
</form>
<form id="form-2">
  <a class="edit" id="edit-form-2">Edit</a>
  ...
</form>
<form id="form-3">
  <a class="edit" id="edit-form-3">Edit</a>
  ...
</form>

这是我到目前为止已经尝试过的方法，但无法正常工作。

$(document).ready(function(){
   $("form").each( function(index) {
            var formID = $("form").attr("id");
            $(".edit").attr("id", "edit-" + formID );
        });
});

不幸的是，它正在向所有表单编辑链接添加id="edit-form-1"。

在表单中还有其他元素我需要做一些类似的事情，但是看一个工作的例子应该会帮助我做剩下的事情。

任何帮助都将不胜感激。

Answer 1

使用this.id和this的.edit子级

$("form").each(function() {
    $(".edit", this).attr("id", "edit-" + this.id);
});

其中$(".edit", this)等同于$(this).find(".edit")

我必须承认这有点奇怪你需要添加那些ID..。你可以做一些类似这样的事情：

$(".edit").on("click", function() {

    var $myForm = $(this).closest("form");
    // Do something with $myForm

});

不需要携带窗体或按钮ID

Answer 2

因此，基于Roko的回答，我能够通过这样做来实现我想要的：

$(".edit).on("click", function() {
  $(this).closest("form").find(".disabled").removeProp("disabled");
});

然而，当我保存到一个变量，然后使用变量$myForm时，我无法让它工作。但我可能没有正确使用它。

再次感谢你的朋友的帮助！