javascript - 将标签的属性设置为 DOM 元素，而不是 jQuery 中的 ID

Question

小问题: 如何使用 jQuery 和 javascript 在不使用输入元素 ID 的情况下将标签元素链接到输入元素？

长问题: 我正在使用 jQuery 克隆一个表单，其中可能有多个表单实例可供用户填写。

标签的“for”属性应该设置为它所针对的输入元素的“id”属性。这在输入元素具有唯一 ID 时有效。

因为我正在克隆相同的输入元素，所以文档中会有多个具有相同 ID 的输入元素。因此，我避免为输入元素设置 id 属性，但我仍然希望在单击标签时专注于输入元素。我还想避免为字段生成随机 ID 或在标签上设置 onclick 事件。

编辑#1

示例标记(注意没有 id)

<form>    
<label>First Name:</label><input type='text' name='FirstName' /><br/>
<label>Last Name:</label><input type='text' name='LastName' /><br/>
</form>

示例克隆代码:

var newForm = $('form').clone();

$(newForm).find('label').each(function(){
   var inputElement = $(this).next('input');

   // I'd love to set the label's for attribute to an element
   $(this).attr('for', inputElement);

});

$(document).append(newForm);

编辑 #2

目前有三种选择:

• 为标签设置 onclick 事件，使其专注于它们对应的输入字段。决定哪些标签适用于哪些输入的标准可以是下一个输入元素或其他内容
• 将输入字段嵌入到标签字段中(由于设计师的选择，可能无法实现)
• 在克隆每个表单时生成随机 ID

Answer 1

很高兴看到标记，但如果我可以假设标记看起来有点像这样的话

<form name="f1">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>

<form name="f2">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>

那么你可以这样做

$('form label').live('click',function(){
  $(this).next('input').focus();
});

您将需要使用 live 或 delegate，因为我假设您正在动态克隆表单。