Question

假设我有标记：

<div class="wrapper-1">
  <input id="name-1" class="name-input" type="text" name="name"/>
  <input id="surname-1" type="text" name="surnamename"/>
  <input id="telephone-1" type="text" name="telephone"/>
  <input id="email-1" type="text" name="email"/>
  <input id="comments-1" type="text" name="comments"/>
</div>

<button>Clone me</button>

这个 JavaScript 来处理克隆

$('button').click(function() {
  var d = $('div');
  var counter = d.length;
  var newCounter = new Number(counter + 1);
  var cloned = $('.wrapper-' + counter).clone().attr('class', 'wrapper-' + newCounter).fadeIn('slow');

  //Finding items that need to have different ID
  cloned.find('.name-input').attr('id', '#name-' + newCounter);

  //Cloning
  $('.wrapper-' + counter).after(cloned);
});

如您所见，类.name-input的输入的ID计数器随着包装器的计数器一起发生变化。

但如果我想更改它的名称，以及4个较低输入的所有ID和名称，我必须手动插入并复制相同的代码：

cloned.find('.name-input').attr('id', '#name-' + newCounter);

想象一下我有25个。

所以我的问题是：

是否可以插入如下内容：

cloned.find('input').attr('id', $(this).attr('id') + '-' + newCounter);

我的意思是，浏览器会自动解析元素的名称和ID，并将counter变量添加到它们中。

当然，在这个给定的示例中，$(this)将引用触发事件的元素 - button，但是这种方法可能有可能吗？

Answer 1

这是jQuery each()函数的功能，例如：

var buttonId = $(this).attr('id');

cloned.find('input').each(function() {
    $(this).attr('id', buttonId + '-' + newCounter);
});

为集合中的每个元素执行each()函数内的代码。在此函数中，this引用当前正在应用代码的元素。

还有其他类似的jQuery函数，如filter()。

克隆项目时，是否可以更改所有输入属性和ID;

1 个答案: