0

私は次のことをしようとしています:

  • <li>たくさんの要素 (div、inputs、textarea など) を含む新しい要素を作成します。
  • 既存<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

それがまさにあなたがやりたいことだと思います：

$("#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/

于 2013-04-25T13:52:08.077 に答える