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

後期の回答を参照してください

$(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); 
    });  
}); 

を試してみてください、しかし、jQueryのを使用して、私はおそらくより、このようにそれを行うだろう：

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

少ないコード、おそらくより良いパフォーマンス。

説明すると、.attr()は、設定している値の関数を受け入れることができます。戻り値は属性の新しい値になります。

この関数では、最初のパラメータは反復の現在の項目のインデックスであり、2番目のパラメータは設定されている属性の現在の値です（この場合はid）。

だから、関数の本体はこのように書きます：

• $(this).prev()jQuery's .prev()を使用して、前の要素を取得します。
• [0] DOM要素をjQueryオブジェクトから引き出します。 （<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

working demo