如何用正确的jQuery添加一些个性化的文本+ id属性？

Question

我有很多这样的div：

<div class="textwidget"><div>
<div class="textwidget"><div>
<div class="textwidget"><div>

我想要这样的div输出：

<div class="textwidget" id="widget-1"><div>
<div class="textwidget" id="widget-2"><div>
<div class="textwidget" id="widget-3"><div>

我有一个jQuery，工作得很好，

$(document).find('.textwidget').each(function(i) {
  $(this).attr('id',[widget-] + i+1);
});

但是添加了小部件-1；小部件-11；小部件-21等等。我只想要小部件-1；小部件-2；小部件-3等等。

Answer 1

使用带有回调的attr()方法，并根据可作为回调的第一个参数访问的索引生成id值。

​

$('.textwidget').attr('id', function(i) {
  return 'widget-' + (i + 1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textwidget">
</div>
<div class="textwidget">
</div>
<div class="textwidget">
</div>

​

Answer 2

它与操作的层次结构有关，使用width+i会立即将其值转换为string，所以如果添加1，它将不会将其添加为math操作，而是将其添加到字符串的末尾。

​

$('.parent').find('.textwidget').each(function(i) {
  $(this).attr('id', 'widget-'+(i+1));
});

console.log($('.parent').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class="textwidget">
  </div>
  <div class="textwidget">
  </div>
  <div class="textwidget">
  </div>
</div>

​

Answer 3

当您执行i+1时，它被解释为级联，尝试如下：

$(document).find('.textwidget').each(function(i) {
  $(this).attr('id',[widget-] + i-(-1));
});