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属性设置为+=当前索引。
返回当前索引的当前标识{{1}。

Answer 2

这样的事情：

$('label').each(function(index) {
    var forAttr = $(this).attr('for');
    $next = $(this).next();
    if($next.attr('id') == forAttr) {
        $(this).attr('for', forAttr + index);
        $next.attr('id', forAttr + index);
    }
});

虽然在服务器端执行此操作会更好。

Answer 3

尝试

$(function(){
    $("input:radio[name='radioBtn']").each(function(index){
        var currElem = $(this);
        var prevLabel = currElem.prev();
        currElem.attr("id", this.id + index);

        prevLabel.attr("for", prevLabel.attr("for") + index);
    });    
});

查看working demo

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

3 个答案: