如何使用克隆的jQuery對象爲div內容中的每個id屬性添加增量值

難以計算如何爲克隆的jQuery對象的div內容中的每個id屬性添加增量值。如何使用克隆的jQuery對象爲div內容中的每個id屬性添加增量值

===================== 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 =================== ==

//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; 
});

來源

2012-07-23 Davis

它看起來不像那麼多代碼 - 爲什麼不把它放在這裏，並提供小提琴鏈接作爲參考。如果jsfiddle被關閉，該怎麼辦？我們無法爲你提供幫助:) – Lix 2012-07-23 16:58:26

我不清楚你問的是什麼問題。 – jfriend00 2012-07-23 17:00:31

對我來說，目前還不清楚你爲什麼要這樣做 - 注意你的例子中甚至沒有'name'屬性。它不完整嗎？ – Alexander 2012-07-23 17:02:21

爲了完整起見，我將在這裏提供一個利用「模板」的小解決方案。

一種隱藏的模板類：

.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++ 
    });

來源

2012-07-23 17:49:07 Alexander

謝謝亞歷山大 – Davis 2012-07-23 18:19:22

@ user952851，我只是改變了'removeClass'語句的順序 – Alexander 2012-07-23 19:03:39

而不是使用編號的ID，你應該在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更具描述性的名稱。

來源

2012-07-23 17:05:19

如何使用克隆的jQuery對象爲div內容中的每個id屬性添加增量值

回答

相關問題