JavaScript For循环在最后一个元素之前结束
我正在设计一个博客，其中每个博客都带有相关标签。 博客的样式根据应用于该博客的标签而有所不同。
我的For循环在到达页面上的最后一个博客之前就结束了，我也不知道为什么。
我环顾四周，发现了这个问题：Javascript for loop skips last element我尝试了该线程中的建议，但是这些建议没有用。
我尝试过的事情：
- i = -1
- i <= postTagArray.length
- 将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>
1 个答案:
答案 0 :(得分：0)
所以最终这是一个结构性问题。
最初，我的脚本位于博客文章上方，并且hubspot会在每篇文章中重复该脚本。
我通过将脚本移到页面底部来解决它。
感谢大家的建议
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？