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

Set attribute for each item with javascript

本文关键字：项目 设置 属性 javascript 使用      更新时间：2023-09-26

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

控制台.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>

你

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

这将引用窗口对象。

取代

      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>

你在这里没有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);
        }
相关文章：