程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为什么我的 querySelectorAll 列表长度未定义?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决为什么我的 querySELEctorAll 列表长度未定义??

开发过程中遇到为什么我的 querySELEctorAll 列表长度未定义?的问题如何解决?下面主要结合日常开发的经验,给出你关于为什么我的 querySELEctorAll 列表长度未定义?的解决方法建议,希望对你解决为什么我的 querySELEctorAll 列表长度未定义?有所启发或帮助;

我需要在 wordpress 博客模板中使用 Js 动态添加一个类。我设法选择了所有相关的类,但我得到“未定义”。

我选择了前 8 篇博文中出现的所有“.layout-simple”类。我的目标是按顺序在 layout-simple 类旁边添加一个独特的类,如下所示:

@H_673_7@<div class="col-lg-4 layout-simple 1"></div>
<div class="col-lg-4 layout-simple 2"></div>
<div class="col-lg-4 layout-simple 3"></div>
<div class="col-lg-4 layout-simple 4"></div>

这是我目前使用的,将“indexes.length”记录到循环外的控制台输出正确的值。但是,循环内部不是这种情况,我得到未定义:

@H_673_7@const indexes = document.querySELEctorAll(".layout-simple");
console.log(indexes.length); // 8
indexes.forEach(function(indexes) {
  indexes.classList.add(indexes.length);
  console.log(indexes.length); // undefined
});

解决方法

我已经让这段代码运行起来了,它不是很漂亮,但我做了几件事:

  1. 添加窗口加载功能,以便在 js 运行之前您的 html 存在,然后没有未定义
  2. 添加一个计数器“x”,它在每个 forEach 上递增,然后将其添加为一个类,但如果可以的话,我不建议使用整数作为类名 - 我在数字之前添加了“网格”,并且有效,整数类没有
  3. 使用 classList 并添加函数来添加新类而不删除现有类

@H_673_7@window.addEventListener('load',function(event) {
  const indexes = document.querySELEctorAll(".layout-simple");
  console.log(indexes.length); // 8

  var x = 1;
  indexes.forEach(e => {
    e.classList.add('grid' + x++);
  })
});
@H_673_7@.layout-simple.grid1 {
  color: red;
}

.layout-simple.grid2 {
  color: blue;
}

.layout-simple.grid3 {
  color: green;
}

.layout-simple.grid4 {
  color: orange;
}

.layout-simple.grid5 {
  color: red;
}

.layout-simple.grid6 {
  color: blue;
}

.layout-simple.grid7 {
  color: green;
}

.layout-simple.grid8 {
  color: orange;
}
@H_673_7@<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>
<div class="col-lg-4 layout-simple">thing</div>

大佬总结

以上是大佬教程为你收集整理的为什么我的 querySelectorAll 列表长度未定义?全部内容,希望文章能够帮你解决为什么我的 querySelectorAll 列表长度未定义?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。