Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
74
rated 0 times [  75] [ 1]  / answers: 1 / hits: 29439  / 7 Years ago, sun, march 5, 2017, 12:00:00

Check this fiddle: 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);
}


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?


More From » jquery

 Answers
61

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.



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

[#58674] Thursday, March 2, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jillcalistay

Total Points: 561
Total Questions: 94
Total Answers: 114

Location: Austria
Member since Thu, Jan 7, 2021
3 Years ago
;