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]从jQuery对象中取出DOM元素。 （<label>）
• 将标签的htmlFor属性设置为当前索引的+=。
• 返回当前编号+=当前索引。

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