0

我正在尝试执行以下操作：

  • 创建一个<li>包含一大堆元素（div、输入、文本区域等）的新元素
  • 附加<li>到现有的<ul>
  • 更改此新附加的所有元素的所有ids, for,变量name<li>

我在这方面遇到了一些困难，而且似乎得到了好坏参半的结果。这是一些代码（我知道它很花哨，但它成功地添加了所有这些项目）：

  $("#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将扫描 new 中的所有元素并将所有值<li>更改为. 有任何想法吗？CMEsz

谢谢

4

1 回答 1

0

I think that's exactly what you want to do:

$("#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>';
    [...]

Completed solution here: http://jsfiddle.net/ouadie/AD3u4/1/

于 2013-04-25T13:52:08.077 回答