JavaScript classList.remove无法正常工作 [英] Javascript classList.remove not working properly

问题描述

检查此小提琴: JSFiddle

HTML:

<table class="myTable">
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">1</span>/<span class="otherStyle">15</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">2</span>/<span class="otherStyle">16</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="">3</span>/<span class="">17</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">4</span>/<span class=" someStyle">18</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">5</span>/<span class=" someStyle">19</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="">6</span>/<span class="">20</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="">7</span>/<span class="">21</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">8</span>/<span class="otherStyle">22</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="">9</span>/<span class="">23</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">10</span>/<span class=" someStyle">24</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">11</span>/<span class=" someStyle">25</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class="otherStyle">12</span>/<span class=" someStyle">26</span>
    </td>
  </tr>
  <tr>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">13</span>/<span class="otherStyle">27</span>
    </td>
    <th>Some text</th>
    <td class="align">
      <span class=" someStyle">14</span>/<span class="otherStyle">28</span>
    </td>
  </tr>
</table>

JavaScript:

JavaScript:

var myTbl = document.getElementsByClassName("myTable")[0];

var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle");
console.log(tSomeStyleClasses);
for (i=0;i<tSomeStyleClasses.length;i++) {
    console.log(tSomeStyleClasses[i].classList);
    //tSomeStyleClasses[i].classList.remove("someStyle");
}

var tOtherStyleClasses = myTbl.getElementsByClassName("otherStyle");
console.log(tOtherStyleClasses);
for (i=0;i<tOtherStyleClasses.length;i++) {
    console.log(tOtherStyleClasses[i].classList);
    //tOtherStyleClasses[i].classList.remove("otherStyle");
}

并检查控制台日志.每个样式有someStyle和otherStyle都有10个条目.现在取消注释//tSomeStyleClasses[i].classList.remove("someStyle");和//tOtherStyleClasses[i].classList.remove("otherStyle");并运行小提琴.再次检查控制台日志.应该删除2 x 10个样式，但只能删除5个样式. 我想知道为什么吗?

And check the console log. There are 10 entries for each, someStyle and otherStyle. Now uncomment //tSomeStyleClasses[i].classList.remove("someStyle"); and //tOtherStyleClasses[i].classList.remove("otherStyle"); and run the fiddle. Check the console log again. 2 x 10 styles should be removed, but instead it removes only 5 styles. I wonder why?

推荐答案

从.getElementsByClassName()返回的值是活动 NodeList.它是活动的"，意味着当您更改列表中的元素时，列表本身会自动更新.因此，当您删除用于查找元素的类时，列表会变短.因为要遍历数字索引，所以最终会跳过元素.

The value returned from .getElementsByClassName() is a live NodeList. That it's "live" means that as you change the elements in the list, the list itself automatically updates. Thus, when you remove the class that you used to find the elements, the list gets shorter. Because you're iterating with a numeric index, you end up skipping elements.

一种处理此问题的好方法是使用简单的while循环并仅对列表的第一个元素进行操作，直到列表为空:

A good way to deal with that is to use a simple while loop and operate only on the first element of the list until the list is empty:

var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle");

while (tSomeStyleClasses.length) {
    tSomeStyleClasses[0].classList.remove("someStyle");
}

这篇关于JavaScript classList.remove无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！