JavaScript for 循环不是 getElementsByClassName 迭代中的函数错误

【问题标题】：JavaScript for loop not a function error on getElementsByClassName iterationJavaScript for 循环不是 getElementsByClassName 迭代中的函数错误
【发布时间】：2017-02-18 05:31:33
【问题描述】：

我有一个等高功能。我有 3 个容器。容器内是我喜欢设置相同高度的瓷砖。我想为每个容器瓷砖设置不同的偏移高度；所以我迭代容器。我有以下设置：

var setTileHeight = function() {
  var containers = document.getElementsByClassName('a-r');

  for (var i in containers) {
    var tiles = containers[i].getElementsByClassName('span-3');
    console.log(tiles);
  }
};

window.onload = function() {
  setTileHeight();
};
.span-3 {
  float: left;
  width: 25%;
  padding: 10px;
}

.span-12 {
  float: left;
  width: 100%;
}

.image {
  width: 50px;
  float: left;
}

.text {
  width: calc(100% - 50px);
  float: left;
}
<div class="msection2-g span-12">
  <div class="a-r span-12">
    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>


    <div style="clear:both;"></div>
  </div>
</div>
<div class="msection2-g">
  <div class="a-r">
    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>


    <div style="clear:both;"></div>
  </div>
</div>
<div class="msection2-g">
  <div class="a-r">
    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>


    <div style="clear:both;"></div>
  </div>
</div>

问题是当我运行此代码时，我在控制台中收到以下消息：

未捕获的类型错误：containers[i].getElementsByClassName 不是函数

我猜这个错误发生在所有元素迭代之后和/或container 对象中存在另一个元素（例如长度）时。有人可以帮我解决这个问题吗？

【问题讨论】：

  • 尝试改变 var tiles = containers[i].getElementsByClassName('span-3'); to var tiles = i.getElementsByClassName('span-3');
  • @Satya 还是没有结果。
  • @JanakaDombawela 刚刚创建了一个小提琴及其工作正常的小提琴jsfiddle.net/7af73f1w
  • 使用for 而不是for..in。 for..in 适合循环对象。在较旧的浏览器中，它还将循环 length 和任何其他属性（在这种情况下为元素 ID）。
  • @Rajesh 似乎是问题所在。谢谢。

标签： javascript for-loop dom


【解决方案1】：

正如所评论的，错误是由于循环结构不当造成的。 for..in 循环遍历对象的属性，而不是数组的元素。

示例

var setTileHeight = function() {
  var containers = document.getElementsByClassName('a-r');

  for (var i in containers) {
    try{
    var tiles = containers[i].getElementsByClassName('span-3');
    console.log(tiles);
    }catch(e){
      console.log("Error due to incorrect value of i: ", i)
    }
  }
};

window.onload = function() {
  setTileHeight();
};
.span-3 {
  float: left;
  width: 25%;
  padding: 10px;
}

.span-12 {
  float: left;
  width: 100%;
}

.image {
  width: 50px;
  float: left;
}

.text {
  width: calc(100% - 50px);
  float: left;
}
<div class="msection2-g span-12">
  <div class="a-r span-12">
    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>


    <div style="clear:both;"></div>
  </div>
</div>
<div class="msection2-g">
  <div class="a-r">
    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>


    <div style="clear:both;"></div>
  </div>
</div>
<div class="msection2-g">
  <div class="a-r">
    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>

    <div class="span-3">
      <div class="span-12">
        <div class="image">
          <img src="https://placehold.it/50x50" alt="image" class="logo">
        </div>
        <div class="text">
          <a href="#" target="_blank">
                                            Text - <span>37 items</span>
                                        </a>
        </div>
      </div>
    </div>


    <div style="clear:both;"></div>
  </div>
</div>

你可以参考for版本使用这个JSFiddle

【讨论】：

    【解决方案2】：

    这不起作用的原因是for..in 正在从containers: HTMLCollection 获取密钥，如果您想循环通过节点，请尝试for 循环

    for (let i = 0; i < containers.length; i++) {
  var tiles = containers[i].getElementsByClassName('span-3');
}

    【讨论】：

    • 只是一个指针，请在发布之前检查所有答案，因为我已经解决了相同的问题。 :-)
    • 我觉得，一个例子和更深入的解释会帮助其他人。当我学习示例时，帮助我更容易理解概念
    【解决方案3】：

    您将需要遍历 div a-r 下所有具有类 span-3 的孩子。并且您应该检查元素的长度，而不是在代码中添加 try catch。

    <script>    
   var setTileHeight = function () {

   var containers = document.getElementsByClassName('a-r');
            for (var i in containers) {
                var allchildren = containers[i].children;
                for (var j in allchildren) {
                    var cls = allchildren[j].className;
                    if (cls === 'span-3') {
                    var item = document.getElementsByClassName(cls);                    
                    if (item && item.length > 0)
                        item[0].setAttribute("style", "height:100px");
                    }                 
                }    
            }
   };

   window.onload = function () {
            setTileHeight();
   };
</script>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-30
      • 2013-07-02
      • 1970-01-01
      • 2017-05-14
      • 2022-11-03
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode