javascript - 使用 jquery 创建元素并给它们不同的类

Question

克隆 .clone 拥有的每个 child

<section class="clone">
   <div class="input-group">
      <input type="text" class="form-control" placeholder="insert step 2 title*">
   </div>
</section>

并使用点击功能进行克隆

$('.btnAnotherStep').on('click',function(){
    var copy =  $('.clone>*').clone();
    $('.container').append(copy);

一切正常，但我的问题是；是否可以为克隆的输入赋予不同的类名。喜欢；

<input type="text" class="form-control input2" placeholder="insert 
step 2 title*">
<input type="text" class="form-control input3" placeholder="insert step 2 title*">
<input type="text" class="form-control input4" placeholder="insert step 2 title*">

我的第一个意见是使用 jquery 从头开始​​创建每个元素，并将类名递增 i 1

var totalInputs = [];
var i = 0;
while(i < 10){
  var input = $("input", {"class": "input[i]"); //but its not possible to refer like that 
  $('body').append(input);
  i++;
}

有什么方法可以做到这一点，因为 "" 里面的标记表明它不像数字那样看待它？

Answer 1

你可以对这种事情使用字符串连接:

var input = $("input", {"class": "input"+i);

或者模板字面量:

var input = $("input", {"class": `input${i}`);

您可以了解有关模板文字的更多信息 HERE

基本上，您可以使用反引号 ` 字符创建它们，并且 ${...} 中的所有内容都被解释为代码。

您应该查看 MDN 页面上的浏览器兼容性部分，因为并非所有浏览器都支持模板文字。