JavaScript For 循环在最后一个元素之前结束

【问题标题】：JavaScript For loop ending before the last elementJavaScript For 循环在最后一个元素之前结束
【发布时间】：2020-08-19 08:29:40
【问题描述】：

我正在设计一个博客，其中每个博客都带有相关标签。 博客的风格会因应用到该博客的标签而异。

我的 For 循环在到达页面上的最后一个博客之前就结束了，我不知道为什么。

我环顾四周，发现：Javascript for loop skips last element 我尝试了该线程中的建议，但没有奏效。

我尝试过的事情：

  • i = -1
  • i
  • 将 for 循环替换为 do/while 循环（我在底部使用了 js）
  • 在循环之前声明 i（将其设置为 0 和 -1）

这是我的完整脚本：

//declare arrays containing every instance of each class
var postTagArray = document.getElementsByClassName('blog-tag');
var postTitleArray = document.getElementsByClassName('blog-title');
var postButtonArray = document.getElementsByClassName('blog-button');
          
//declare variable containing the preset tags
var Security = "/ Security";
var Cleaning = "/ Cleaning";
var Safety = "/ Safety";
var Hospitality = "/ Hospitality";
var Logistics = "/ Logistics";
var General = "/ General";
          
for (var i=0; i <= postTagArray.length; i++) {
  //bring in the HTML of the element
  var tag=postTagArray[i].innerHTML;
            
  //compare HTML of the element and the preset tag
  //then assigns a value of 0 if they match, or 1 if they don't
  var secResult = tag.localeCompare(Security);
  var cleResult = tag.localeCompare(Cleaning);
  var safResult = tag.localeCompare(Safety);
  var hosResult = tag.localeCompare(Hospitality);
  var logResult = tag.localeCompare(Logistics);
  var genResult = tag.localeCompare(General);
            
  //find the result that matches (that equals 0) and assign styling accordingly
  if (secResult=="0"){
     postTagArray[i].style.color = "#0085CA";
     postTitleArray[i].style.color = "#0085CA";
     postButtonArray[i].style.background = "#0085CA";
  }
  if (cleResult=="0"){
     postTagArray[i].style.color = "#6CC24A";
     postTitleArray[i].style.color = "#6CC24A";
     postButtonArray[i].style.background = "#6CC24A";
  }
  if (safResult=="0"){
     postTagArray[i].style.color = "#EF3340";
     postTitleArray[i].style.color = "#EF3340";
     postButtonArray[i].style.background = "#EF3340";
  }
  if (hosResult=="0"){
     postTagArray[i].style.color = "#D9027D";
     postTitleArray[i].style.color = "#D9027D";
     postButtonArray[i].style.background = "#D9027D";
  }
  if (logResult=="0"){
     postTagArray[i].style.color = "#685BC7";
     postTitleArray[i].style.color = "#685BC7";
     postButtonArray[i].style.background = "#685BC7";
  }
  if (genResult=="0"){
     postTagArray[i].style.color = "#959595";
     postTitleArray[i].style.color = "#959595";
     postButtonArray[i].style.background = "#959595";
  }
}

这是输出：

如您所见，最后一个博客没有被分配与其他清洁博客相同的样式。

这是我尝试使用的 do/while 循环：

var i = 0;
do {
   //bring in the HTML of the element
   var tag=postTagArray[i].innerHTML;

   //compare HTML of the element and the preset tag
   //then assigns a value of 0 if they match, or 1 if they don't
   var secResult = tag.localeCompare(Security);
   var cleResult = tag.localeCompare(Cleaning);
   var safResult = tag.localeCompare(Safety);
   var hosResult = tag.localeCompare(Hospitality);
   var logResult = tag.localeCompare(Logistics);
   var genResult = tag.localeCompare(General);

   //find the result that matches (that equals 0) and assign styling accordingly
   if (secResult=="0"){
      postTagArray[i].style.color = "#0085CA";
      postTitleArray[i].style.color = "#0085CA";
      postButtonArray[i].style.background = "#0085CA";
   }
   if (cleResult=="0"){
      postTagArray[i].style.color = "#6CC24A";
      postTitleArray[i].style.color = "#6CC24A";
      postButtonArray[i].style.background = "#6CC24A";
   }
   if (safResult=="0"){
      postTagArray[i].style.color = "#EF3340";
      postTitleArray[i].style.color = "#EF3340";
      postButtonArray[i].style.background = "#EF3340";
   }
   if (hosResult=="0"){
      postTagArray[i].style.color = "#D9027D";
      postTitleArray[i].style.color = "#D9027D";
      postButtonArray[i].style.background = "#D9027D";
   }
   if (logResult=="0"){
      postTagArray[i].style.color = "#685BC7";
      postTitleArray[i].style.color = "#685BC7";
      postButtonArray[i].style.background = "#685BC7";
   }
   if (genResult=="0"){
      postTagArray[i].style.color = "#959595";
      postTitleArray[i].style.color = "#959595";
      postButtonArray[i].style.background = "#959595";
   }
   i++;
} while (i <= postTagArray.length);

我没有想法，不知道为什么我尝试过的东西不起作用，所以非常感谢任何帮助。

更新：感谢@JudeMaranga 和@Wyck，我发现最后一个元素根本没有加载到数组中。它两次加载第一个元素并且没有到达最后一个元素。这是数组的 console.log 输出：

当我打印出数组的 0、1、2 个元素时，元素 2 被返回为未定义

更新 2：这是我正在构建的开发页面的链接：http://3441160.hs-sites.com/blog

我也在这里重新创建了它：

<body>
    <div>
         <script>
        //declare arrays containing every instance of each class
        var postTagArray = document.getElementsByClassName('blog-tag');
        var postTitleArray = document.getElementsByClassName('blog-title');
        var postButtonArray = document.getElementsByClassName('blog-button');
                  
        //declare variable containing the preset tags
        var Security = "/ Security";
        var Cleaning = "/ Cleaning";
        var Safety = "/ Safety";
        var Hospitality = "/ Hospitality";
        var Logistics = "/ Logistics";
        var General = "/ General";
                  
        var i;
        for (let i=0; i < postTagArray.length; ++i) {
            //bring in the HTML of the element
            var tag=postTagArray[i].innerHTML;
                    
            //compare HTML of the element and the preset tag
            //then assigns a value of 0 if they match, or 1 if they don't
            var secResult = tag.localeCompare(Security);
            var cleResult = tag.localeCompare(Cleaning);
            var safResult = tag.localeCompare(Safety);
            var hosResult = tag.localeCompare(Hospitality);
            var logResult = tag.localeCompare(Logistics);
            var genResult = tag.localeCompare(General);
                    
            //find the result that matches (that equals 0) and assign styling accordingly
            if (secResult=="0"){
                postTagArray[i].style.color = "#0085CA";
                postTitleArray[i].style.color = "#0085CA";
                postButtonArray[i].style.background = "#0085CA";
            }
            if (cleResult=="0"){
                postTagArray[i].style.color = "#6CC24A";
                postTitleArray[i].style.color = "#6CC24A";
                postButtonArray[i].style.background = "#6CC24A";
            }
            if (safResult=="0"){
                postTagArray[i].style.color = "#EF3340";
                postTitleArray[i].style.color = "#EF3340";
                postButtonArray[i].style.background = "#EF3340";
            }
            if (hosResult=="0"){
                postTagArray[i].style.color = "#D9027D";
                postTitleArray[i].style.color = "#D9027D";
                postButtonArray[i].style.background = "#D9027D";
            }
            if (logResult=="0"){
                postTagArray[i].style.color = "#685BC7";
                postTitleArray[i].style.color = "#685BC7";
                postButtonArray[i].style.background = "#685BC7";
            }
            if (genResult=="0"){
                postTagArray[i].style.color = "#959595";
                postTitleArray[i].style.color = "#959595";
                postButtonArray[i].style.background = "#959595";
            }
        }
        //print contents of postTagArray to the console for testing purposes
        for (let i = 0; i < postTagArray.length; i++) {
            console.log(i, postTagArray[i]);
        }
    </script>
        <h1 class="blog-tag">/ Cleaning</h1>
        <h2 class="blog-title">Title</h2>
        <button class="blog-button">button</button>
    </div>
    <div>
         <script>
        //declare arrays containing every instance of each class
        var postTagArray = document.getElementsByClassName('blog-tag');
        var postTitleArray = document.getElementsByClassName('blog-title');
        var postButtonArray = document.getElementsByClassName('blog-button');
                  
        //declare variable containing the preset tags
        var Security = "/ Security";
        var Cleaning = "/ Cleaning";
        var Safety = "/ Safety";
        var Hospitality = "/ Hospitality";
        var Logistics = "/ Logistics";
        var General = "/ General";
                  
        var i;
        for (let i=0; i < postTagArray.length; ++i) {
            //bring in the HTML of the element
            var tag=postTagArray[i].innerHTML;
                    
            //compare HTML of the element and the preset tag
            //then assigns a value of 0 if they match, or 1 if they don't
            var secResult = tag.localeCompare(Security);
            var cleResult = tag.localeCompare(Cleaning);
            var safResult = tag.localeCompare(Safety);
            var hosResult = tag.localeCompare(Hospitality);
            var logResult = tag.localeCompare(Logistics);
            var genResult = tag.localeCompare(General);
                    
            //find the result that matches (that equals 0) and assign styling accordingly
            if (secResult=="0"){
                postTagArray[i].style.color = "#0085CA";
                postTitleArray[i].style.color = "#0085CA";
                postButtonArray[i].style.background = "#0085CA";
            }
            if (cleResult=="0"){
                postTagArray[i].style.color = "#6CC24A";
                postTitleArray[i].style.color = "#6CC24A";
                postButtonArray[i].style.background = "#6CC24A";
            }
            if (safResult=="0"){
                postTagArray[i].style.color = "#EF3340";
                postTitleArray[i].style.color = "#EF3340";
                postButtonArray[i].style.background = "#EF3340";
            }
            if (hosResult=="0"){
                postTagArray[i].style.color = "#D9027D";
                postTitleArray[i].style.color = "#D9027D";
                postButtonArray[i].style.background = "#D9027D";
            }
            if (logResult=="0"){
                postTagArray[i].style.color = "#685BC7";
                postTitleArray[i].style.color = "#685BC7";
                postButtonArray[i].style.background = "#685BC7";
            }
            if (genResult=="0"){
                postTagArray[i].style.color = "#959595";
                postTitleArray[i].style.color = "#959595";
                postButtonArray[i].style.background = "#959595";
            }
        }
        //print contents of postTagArray to the console for testing purposes
        for (let i = 0; i < postTagArray.length; i++) {
            console.log(i, postTagArray[i]);
        }
    </script>
        <h1 class="blog-tag">/ Safety</h1>
        <h2 class="blog-title">Title</h2>
        <button class="blog-button">button</button>
    </div>
    <div>
         <script>
        //declare arrays containing every instance of each class
        var postTagArray = document.getElementsByClassName('blog-tag');
        var postTitleArray = document.getElementsByClassName('blog-title');
        var postButtonArray = document.getElementsByClassName('blog-button');
                  
        //declare variable containing the preset tags
        var Security = "/ Security";
        var Cleaning = "/ Cleaning";
        var Safety = "/ Safety";
        var Hospitality = "/ Hospitality";
        var Logistics = "/ Logistics";
        var General = "/ General";
                  
        var i;
        for (let i=0; i < postTagArray.length; ++i) {
            //bring in the HTML of the element
            var tag=postTagArray[i].innerHTML;
                    
            //compare HTML of the element and the preset tag
            //then assigns a value of 0 if they match, or 1 if they don't
            var secResult = tag.localeCompare(Security);
            var cleResult = tag.localeCompare(Cleaning);
            var safResult = tag.localeCompare(Safety);
            var hosResult = tag.localeCompare(Hospitality);
            var logResult = tag.localeCompare(Logistics);
            var genResult = tag.localeCompare(General);
                    
            //find the result that matches (that equals 0) and assign styling accordingly
            if (secResult=="0"){
                postTagArray[i].style.color = "#0085CA";
                postTitleArray[i].style.color = "#0085CA";
                postButtonArray[i].style.background = "#0085CA";
            }
            if (cleResult=="0"){
                postTagArray[i].style.color = "#6CC24A";
                postTitleArray[i].style.color = "#6CC24A";
                postButtonArray[i].style.background = "#6CC24A";
            }
            if (safResult=="0"){
                postTagArray[i].style.color = "#EF3340";
                postTitleArray[i].style.color = "#EF3340";
                postButtonArray[i].style.background = "#EF3340";
            }
            if (hosResult=="0"){
                postTagArray[i].style.color = "#D9027D";
                postTitleArray[i].style.color = "#D9027D";
                postButtonArray[i].style.background = "#D9027D";
            }
            if (logResult=="0"){
                postTagArray[i].style.color = "#685BC7";
                postTitleArray[i].style.color = "#685BC7";
                postButtonArray[i].style.background = "#685BC7";
            }
            if (genResult=="0"){
                postTagArray[i].style.color = "#959595";
                postTitleArray[i].style.color = "#959595";
                postButtonArray[i].style.background = "#959595";
            }
        }
        //print contents of postTagArray to the console for testing purposes
        for (let i = 0; i < postTagArray.length; i++) {
            console.log(i, postTagArray[i]);
        }
    </script>
        <h1 class="blog-tag">/ Cleaning</h1>
        <h2 class="blog-title">Title</h2>
        <button class="blog-button">button</button>
    </div>
</body>

【问题讨论】：

  • 您可以尝试通过执行 console.log 在控制台中打印postTagArray 的内容并在此处共享输出吗？
  • 它总是跳过最后一个元素吗？如果复制最后一个元素并运行循环会发生什么？
  • 顺便说一句，循环条件中是i &lt; postTagArray.length而不是i &lt;= postTagArray.length。
  • @alan_jouhar 是的，它总是最后一个元素，我尝试复制最后一个元素并得到相同的结果。
  • @JudeMaranga 我不确定如何在我工作的环境中执行此操作，但我确实通过打印出来检查了数组的内容。原来最后一个元素根本没有被加载到数组中。我不明白为什么会这样，“blog-tag”数组应该拉入该类的所有实例。我仔细检查了一下，最后一个元素也应用了该类。

标签： javascript arrays loops


【解决方案1】：

所以说到底是结构性问题。

我最初将我的脚本放在博客文章上方，而 hubspot 在每篇文章中都重复它。

我通过将脚本移动到页面底部来解决它。

感谢大家的建议

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-12
    • 2021-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 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