jQuery -更改jQuery移动页面中所有元素id/name/for的最后三个字符

Question

我想做以下事情:

• 创建一个新的<li>元素，包含一大堆元素(div, input, textarea等)
• 将<li>附加到现有<ul>
• 为新添加的<li>
的所有元素更改所有ids, for, name变量

我在这方面有一些困难，似乎得到了不同的结果。下面是一些代码(我知道它很笨拙，但它成功地添加了所有这些项):

  $("#add-labour").click(function(){
    var next = 2;
    var new_li = "<li>";
    new_li += '<div class="ui-grid-a">';
    new_li += '<div class="ui-block-a" style="text-align:center">';
    new_li += '<h1><label for="date-CME">Date</label></h1>';
    new_li += '</div>';
    new_li += '<p class="ui-block-b"><input type="date" name="date-CME" id="date-CME" value=""></p>';
    new_li += '</div>';
    new_li += '<div class="ui-grid-a">';
    new_li += '<div class="ui-block-a" style="text-align:center">';
    new_li += '<h1><label for="wo-in-CME">In</label></h1>';
    new_li += '</div>';
    new_li += '<p class="ui-block-b"><input type="time" name="wo-in-CME" id="wo-in-CME" value=""></p>';
    new_li += '</div>';
    new_li += '<div class="ui-grid-a">';
    new_li += '<div class="ui-block-a" style="text-align:center">';
    new_li += '<h1><label for="wo-out-2">Out</label></h1>';
    new_li += '</div>';
    new_li += '<p class="ui-block-b"><input type="time" name="wo-out-CME" id="wo-out-CME" value=""></p>';
    new_li += '</div>';
    new_li += '<label for="num-workers-2">Number of Workers</label>';
    new_li += '<input type="range" name="num-workers-CME" id="num-workers-CME" value=1 min=1 max=5>';
    new_li += '<label for="work-done-2">Tasks Completed:</label>';
    new_li += '<textarea cols="40" rows="8" name="work-done-CME" id="work-done-2"></textarea>';
    new_li += '<label for="l-warranty-CME">Warranty?</label>';
    new_li += '<select name="l-warranty-CME" id="l-warranty-CME" data-role="slider">';
    new_li += '<option value="off">No</option>';
    new_li += '<option value="on">Yes</option>';
    new_li += '</select>';
    new_li += '<br>';
    new_li += '</li>';
    $("#labour-sets").append(new_li);
    $("#labour-sets").listview('refresh');
    // #form is the name of the jQuery mobile page
    $("#form").trigger('create');

然后，改变所有元素的变量，我有另一个按钮(用于测试的时刻)，当点击应该改变所有元素的变量。像这样:

  $("#calc").click(function(){
    var sz = $("#labour-sets li").size();
    $("#work-done-1").val(sz);
    fix_id_numbers(sz);
  }); 
function fix_id_numbers(sz){
  // "sz" is the number of <li> in the <ul>
  $('.container').find('[id$="-CME"]').each(function(){
    this.id = this.id.replace('CME', sz);
  });
  $('.container').find('[for="-CME"]').each(function(){
    this.for = this.for.replace('CME', sz);
  });
  $('.container').find('[name="-CME"]').each(function(){
    this.name = this.name.replace('CME', sz);
  });

理想情况下，fix_id_numbers将扫描新<li>中的所有元素，并将CME中的所有内容更改为sz的值。什么好主意吗?

谢谢

Answer 1

我认为这正是你想要做的:

$("#add-labour").click(function(){
    var next = 2;
    var sz = $("#labour-sets li").size();
    var cme = sz + 1;
    console.log("cme:"+cme);
    var new_li = "<li>";
    new_li += '<div class="ui-grid-a">';
    new_li += '<div class="ui-block-a" style="text-align:center">';
    new_li += '<h1><label for="date-'+cme+'>Date</label></h1>';
    [...]

完整解决方案:http://jsfiddle.net/ouadie/AD3u4/1/