Question

我有HTML代码，我想多次克隆这些字段，用不同的id

标记元素，该怎么办？我试图克隆，但无法更改ID。我的HTML代码是

<div class="adlthd">Number of Adults & child</div>
  <div id='formrepeat' class="ratediv">    
   <div class="Paxtbl" id="Paxtblid">
    <p></p><P>1</P><P>2</P><P>3</P><P>4</P><P>5</P><P>6</P><P>7</P><P>8</P><P>9</P>
     <div class="clear" id="snRates">
       <P>Season 1</P>
       <P><input type="text" class="inb4 itx validate[required,custom[number]]" name="1adult" id="1adultn1" onchange="convertToFloat(this)"></P>
       <P><input type="text" class="inb4 itx validate[required,custom[number]]" name="2adult" id="1adultn2" onchange="convertToFloat(this)"></P>
       <P><input type="text" class="inb4 itx validate[required,custom[number]]" name="3adult" id="1adultn3" onchange="convertToFloat(this)"></P>
     </div>
   </div>
</div>`

我的JavaScript是

<script type="text/javascript">
    $(document).ready(function() {
    $('#mybutton').change(function(){
        var total = $(this).val();
        var newNum  = new Number(total + 1);
        div_rate =$('.ratediv').length;
        if(div_rate>total)
        {
          for(div_rate; total<div_rate;div_rate--)
          {
            $('#Paxtblid').remove();
          }
        }else{
          for(div_rate;div_rate<total;div_rate++)
        {
            $('#Paxtblid').clone().appendTo('#formrepeat');
        }
      }        
    });
});
</script>

Answer 1

如何将所需的div克隆到另一个隐藏的div，然后从那里操纵id并附加到所需的位置。

<div id="form1"></div>

在JavaScript中：

    var number = 1 + Math.floor(Math.random() * 6);
    $('#Paxtblid').clone().appendTo('#form1');
    $('#form1').find("input").each(function() {
        var randnumber=number++;
        var id="1adult"+randnumber;
        $(this).attr("id",id);
    });
    $('#form1').appendTo('#formrepeat');
    alert($('#form1').html());
    $('#form1').find("#Paxtblid").clone().appendTo('#formrepeat');
    $("#form1").html("");

您可以根据需要更改id。

这是Demo 这是我能想到的，我无法得到直接的解决方案。可能还有其他可能性。

好的，我有更好的解决方案。您可以使用:last Selector，从而使隐藏div的必要性无效，如上述解决方案中所述：

  var number = 1 + Math.floor(Math.random() * 6);
    $('#Paxtblid').clone().appendTo('#formrepeat');
     $('#formrepeat .Paxtbl:last').find("input").each(function() {
        var randnumber=number++;
        var id="1adult"+randnumber;
        $(this).attr("id",id);
    });

这是Demo。

使用jquery重复id，name

1 个答案: