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

时间：2017-02-18 05:31:33

标签： javascript for-loop dom

我有一个相同的高度功能。我有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>

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

  

未捕获的TypeError：containers [i] .getElementsByClassName不是函数

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

3 个答案:

答案 0 :(得分：0)

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

<强>示例

＆＃13;
＆＃13; 
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();
};
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

您可以使用此JSFiddle

参考for版本

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

你需要在div span-3下迭代所有具有类a-r的孩子。你应该检查元素的长度，而不是在代码中添加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>
相关问题
最新问题