Question

在下面的代码中，

<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>

<script>
    $( "div" )
      .attr( "id", function( index, value ) {
        return "div-id" + index;
      })
      .each(function() {
        $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
    });
</script>

我们有.attr("id", function( index, value ){..})查询选择方法，它接受函数来计算匹配元素集的属性

是index参数，是jQuery对象$('div')中DOM元素集合的索引吗？

jQuery对象value中的div参数，DOM元素（$('div')）？

Answer 1

将值返回到set的函数。 this是当前元素。接收集合中元素的索引位置和旧属性值作为参数。

来源（以及更多信息）：http://api.jquery.com/attr/

您也可以使用console.log(index, value);查找参数值。

索引从0开始，是div的索引位置 - 在你的情况下，它将是0-2。该值只是属性的旧值，在您的情况下它将为空。结果：

Zero-th (id = 'div-id0')
First (id = 'div-id1')
Second (id = 'div-id2')

顺便说一句，你应该总是瞄准没有jQuery的解决方案，通常它不需要花费更多的时间来使用Vanilla JavaScript，至少现在不行了。例如，快速测试具有相同的结果：

var index = 0;
[].forEach.call(
  document.querySelectorAll('div'), 
  function(el){
    el.setAttribute('id', 'div-id' + index);
    el.querySelector('span').innerHTML = '(id = "<b>' + el.id + '</b>")';
    index++;
  }
);

Answer 2

为jQuery匹配集中的每个元素调用.attr()函数的回调函数。由于您的匹配集是使用选择器'div'创建的，因此它将包含DOM中的所有<div>元素。

回调函数的第一个参数（index）是匹配集中元素的索引。因此，如果DOM中有三个<div>元素，则匹配集中将包含三个元素。因此索引将为0到2。

回调函数的第二个参数（attr）是元素属性的当前值。

如果要引用回调函数中的元素，可以使用this，因为它是函数调用的上下文。请注意，this是指DOM元素，而不是jQuery对象。如果需要jQuery对象，请使用$(this)。

传递给.attr（）的函数的索引和值参数

2 个答案: