Question

我想为列表中的每个项添加一个属性。我目前有以下不起作用。当我在for循环外的控制台中输出我的var的长度时，它似乎输出正确的数字。但是，当我尝试在for循环中应用一个属性时它不起作用，因为长度似乎不起作用？我在这做错了什么？如何改进，以便我可以将属性应用于列表中的每个项目？

的console.log

    test1 length || 3
    test2 length || 3
    test1||0
    TypeError: this.setAttribute is not a function

        var test1 = document.getElementById('test1').getElementsByTagName('a');
        var test2 = document.getElementById('test2').getElementsByTagName('div');
        console.log('test1 length || ' + test1.length);
        console.log('test2 length || ' + test2.length);

        for (var i = 0; i < test1.length; i++) {
          console.log('test1||' + i);
          this.setAttribute('title', 'test1' + i);
        }

        for (var i = 0; i < test2.length; i++) {
          console.log('test2||' + i);
          this.setAttribute('title', 'test2' + i);
        }

        <div id="test1">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
        </div>

        <div id="test2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

Answer 1

你已经测试了一个数组并循环遍历它你可以用test [i]引用那个特定的项目。

这将指向window对象。

替换

      this.setAttribute('title', 'test1' + i);

与

      test[i].setAttribute('title', 'test1' + i);

同样适用于test2。

以下的工作输出

var test1 = document.getElementById('test1').getElementsByTagName('a');
        var test2 = document.getElementById('test2').getElementsByTagName('div');
        console.log('test1 length || ' + test1.length);
        console.log('test2 length || ' + test2.length);

        for (var i = 0; i < test1.length; i++) {
          console.log('test1||' + i);
          test1[i].setAttribute('title', 'test1' + i);
        }

        for (var i = 0; i < test2.length; i++) {
          console.log('test2||' + i);
         test2[i].setAttribute('title', 'test2' + i);
        }

        <div id="test1">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
        </div>

        <div id="test2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

Answer 2

您这里没有this

this.setAttribute('title', 'test2' + i);

您需要将其更改为

test1[i].setAttribute(...

和

test2[i].setAttribute(...

<强>工作：

        var test1 = document.getElementById('test1').getElementsByTagName('a');
        var test2 = document.getElementById('test2').getElementsByTagName('div');
        console.log('test1 length || ' + test1.length);
        console.log('test2 length || ' + test2.length);

        for (var i = 0; i < test1.length; i++) {
          console.log('test1||' + i);
          test1[i].setAttribute('title', 'test1' + i);
        }

        for (var i = 0; i < test2.length; i++) {
          console.log('test2||' + i);
          test2[i].setAttribute('title', 'test2' + i);
        }

使用javascript为每个项目设置属性

2 个答案: