복제 된 jQuery 객체를 사용하여 div 컨텐츠 내의 각 id 속성에 증분 값을 추가하는 방법

Question

복제 된 jQuery 객체로 div 컨텐츠 내의 각 id 속성에 대한 증가 값을 추가하는 방법을 파악하는 데 어려움이 있습니다.

http://jsfiddle.net/hvK8d/

===================== HTML =================== ==

<div class="upload-file-container"> 
    <div class="uploadFile left clearfix"> 
    <input type="file" id="FileUpload1"> 
    <table id="RadioButtonList1"> 
     <tbody> 
     <tr> 
      <td><input type="radio" value="Resume" id="RadioButtonList1_1"> 
      <label for="RadioButtonList1_1">Resume</label></td> 
      <td><input type="radio" value="Letter of Recommendation" id="RadioButtonList1_2"> 
      <label for="RadioButtonList1_2">Letter of Recommendation</label></td> 
      <td><input type="radio" value="Other" id="RadioButtonList1_3"> 
      <label for="RadioButtonList1_3">Other</label></td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
    <a href="javascript:;" class="remove left">Remove</a> </div> 
<div class=""><a class="plus" href="javascript:;">plus one</a></div> 

=====================의 JQUERY =================== == 대신 번호가 ID를 사용

//Cloning upload file control 
$('.remove').live('click', function() { 
    if (confirm("Are you sure you wish to remove this item?")) { 
     $(this).parent().slideUp('fast', function() { 
      $(this).remove(); 
     }); 
    } 
    return false; 
}); 

$('.plus').click(function() { 
    console.log('cloning'); 
    var divCloned = $('.upload-file-container:first').clone(); 
    divCloned.hide().insertAfter('.upload-file-container:last').slideDown('fast'); 
    return false; 
}); 

Answer 1

완전한 설명을 위해 여기에 "템플릿"을 사용하는 작은 솔루션을 넣을 것입니다.

템플릿 숨기는 클래스 :

.upload-file-container.template { 
    display: none; 
} ​ 

대체 할 수있는 작은 기능 :

$.fn.template = function(variables) { 
    return this.each(function() { 
    this.innerHTML = this.innerHTML.replace(/{{(.+)}}/g, function(match, variable) { 
     return variables[variable]; 
    }); 
    return this; 
    }); 
}; 

템플릿 :

<div class="upload-file-container template"> 
    <div class="uploadFile left clearfix"> 
    <input type="file" id="FileUpload{{id}}"> 
    <table id="RadioButtonList{{id}}"><tbody> 
     <tr> 
     <td> 
      <input type="radio" value="Resume" id="RadioButtonList{{id}}_1"> 
      <label for="RadioButtonList{{id}}_1">Resume</label> 
     </td> 
     </tr> 
    </tbody></table> 
    </div> 
</div> 

사용법 :

var count = 0; 

var divCloned = $(".upload-file-container.template") 
    .clone() 
    .removeClass("template") 
    .template({ 
    id: count++ 
    }); 

,536을

Answer 2

, 당신은 name 속성에 배열과 같은 표기법 (예를 RadioButtonList[])를 사용하여 수, 그리고주위에 라벨을 포장한다s :

<td> 
    <label for="RadioButtonList1_1"> 
     <input type="radio" value="Resume" name="RadioButtonList1[]"> 
     Resume 
    </label> 
</td> 
<td> 
    <label for="RadioButtonList1_2"> 
     <input type="radio" value="Letter of Recommendation" name="RadioButtonList2[]"> 
     Letter of Recommendation 
    </label> 
</td> 
<td> 
    <label for="RadioButtonList1_3"> 
     <input type="radio" value="Other" name="RadioButtonList3[]"> 
     Other 
    </label> 
</td> 

P.S.RadioButtonList보다 자세한 이름을 사용하는 것도 고려해야합니다.