我在页面上多次放置了以下代码,有些放在表格中,有些放在工具提示中:
<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>
提前非常感谢。
最佳答案
迟到的答案,但使用 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
+=
当前索引。
关于jQuery - 循环标签/输入对并添加唯一 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4422396/