jQuery - 循环标签/输入对并添加唯一 ID

Question

我在页面上多次放置了以下代码，有些放在表格中，有些放在工具提示中:

<p class="radioBtn">
    <label for="business"></label>
    <input id="business" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">    
    <label for="private"></label>
    <input id="private" type="radio" name="radioBtn" value="" />
</p>

我想知道如何使用 jQuery 循环遍历整个页面，并在标签“for”属性和输入“id”的末尾添加一个唯一的 ID 号，这样我最终会得到一些结果每个配对都是独一无二的，如下所示:

<p class="radioBtn">
    <label for="business0"></label>
    <input id="business0" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">    
    <label for="private0"></label>
    <input id="private0" type="radio" name="radioBtn" value="" />
</p>

提前非常感谢。

Answer 1

迟到的答案，但使用 jQuery，我可能会这样做更像这样:

$("input:radio[name=radioBtn]").attr('id',function(index,id){
    $(this).prev()[0].htmlFor += index;
    return id += index;
});

代码更少，性能可能更好。

解释一下， .attr() 可以接受您设置的值的函数。它的返回值将是该属性的新值。

在函数中，第一个参数是迭代中当前项的索引，第二个参数是正在设置的属性的当前值(本例中为 id)。

所以函数体是这样的:

• $(this).prev()使用 jQuery's .prev() 获取前一个元素.
• [0]将 DOM 元素从 jQuery 对象中拉出。 (<label>)
• 设置标签的 htmlFor属性至+=当前索引。
• 返回当前 ID +=当前索引。