Question

在我的容器news-variety中，我有4列，我只想将所有列放到左边，并为每列写动画。

为此，我使用CSS left属性。

我写了这个函数来获取no。列，但它添加了白色空格并显示错误，在我的情况下，我需要i值0,1,2,3,4，但此函数显示0, 2, 4, 6, 8。

请帮我删除白色空格，并将i值设为0,1,2,3,4。

这是我的代码：

var newsVariety = document.getElementById('news-variety');
if(newsVariety){
    var newsColums = newsVariety.childNodes;
    for(i=0;i<newsColums.length;i++){
        if(newsColums[i].className == "column") continue;
        alert(i);
    }
}

Answer 1

您忘记了在DOM中将空格表示为文本元素。

if (newsVariety) {
  var newsColums = newsVariety.childNodes;
    for (col = 0, i = 0; i < newsColums.length; i++) {
      if (newsColums[i].className == "column")
        continue;
        alert (col++);
     }
 }

Answer 2

除了元素之外，您还获得了空白（文本）节点。您可以排除文本节点，如下所示：

var newsVariety = document.getElementById('news-variety');
    if(newsVariety){
        var newsColums = newsVariety.childNodes;
        for(i=0;i<newsColums.length;i++){
            if(newsColums[i].className == "column") continue;
            if(newsColums[i].nodeType == 3) continue;
            alert(i);
        }
    }

但更好的解决方案是使用一个函数（getElementsByTagName），它只为您提供元素，如下所示：

var newsVariety = document.getElementById('news-variety');
    if(newsVariety){
        var newsColums = newsVariety.getElementsByTagName('whatever-your-element-tag-is');
        for(i=0;i<newsColums.length;i++){
            if(newsColums[i].className == "column") continue;
            alert(i);
        }
    }

Javascript空白问题

2 个答案: