Question

检查这个小提琴：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的：

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");
}

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

Answer 1

.getElementsByClassName()返回的值是实时 NodeList。这是＆＃34;生活＆＃34;意味着当您更改列表中的元素时，列表本身会自动更新。因此，当您删除用于查找元素的类时，列表会变短。因为您正在使用数字索引进行迭代，所以最终会跳过元素。

处理这种情况的一个好方法是使用一个简单的while循环，只对列表的第一个元素进行操作，直到列表为空：

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

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

Answer 2

因为getElementsByClassName为您提供了匹配元素的实时列表。当您从索引0的元素中删除该类时，该列表会立即更新以从列表中删除该元素并将所有其他元素向下移动。由于您随后递增i，因此索引0处的现在元素无法处理。

或者：

向后通过列表，或
使用document.querySelectorAll(".someStyle")，它返回快照列表，而不是实时快照列表

Answer 3

我发现并且最有效的最简单方法是使用： -someElementToRemoveClassName-.classList.value = ""

它将清除整个ClassName列表，并将其返回到原始状态，让你们再次重新添加过渡类，并使过渡像往常一样再次出现。

Javascript classList.remove无法正常工作

3 个答案: