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