All geek questions in one place

ForEach processes an array of DOM elements in one

I came across the strange behavior of simple JS code. Items processed through one.

var a = document.getElementsByClassName('nahren');
Array.prototype.forEach.call(a, function(e) {
    e.classList.remove('nahren')
})

JSFiddle example

+4
source share
3 answers

The collections returned getElementsByClassNameare “live”: if you change them to disqualify them from the selector, they disappear from the collection. This makes iterating awkward over them. Use querySelectorAll('.nahren')that returns a dead collection or binds a live collection by cloning it:

var deadArray = Array.prototype.slice.call(liveCollection);
deadArray.forEach(...)
+10
source

Amadan already answered correctly, but here is another implementation in which you can clone them using ES6.

var a = Array.from(document.getElementsByClassName('nahren')); //clone array
Array.prototype.forEach.call(a, function(e,i) {
  e.classList.remove('nahren');
})
div#container div {
  height: 30px;
  width: 100px;
  margin-bottom: 5px;
}

.hren {
  outline: 1px red solid;
}

.hren.nahren {
  outline: 1px blue solid;
}
<div id="container">
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
  <div>
Run codeHide result
+3

I have attached a code snippet for your requirement. In your case, you cannot use the class name 'nahren'as a selector. Because when you delete a class 'nahren'once from your DOM element, your object is no longer the same. You can use a class 'hren'to select a DOM object, since you are deleting the class 'nahren', only your DOM selector will not change.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      div {
        height: 30px;
        width: 100px;
        margin-bottom: 5px;
      }
      
      .hren {
        outline: 1px red solid
      }
      
      .hren.nahren {
        outline: 1px blue solid
      }
    </style>
    <script>
	function RemoveClass(){
		var a = document.getElementsByClassName('hren');
	    Array.prototype.forEach.call(a, function(e,i) {
	       e.classList.remove('nahren');
	    })
	}
          
    </script>
  </head>
  <body>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
	<button onclick="RemoveClass()">Remove</button>
  </body>
</html>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1659577/

More articles:


All Articles