6 Replies - 482 Views - Last Post: 02 June 2018 - 05:38 AM

#1 kayut   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 20-January 17

Is it possible to convert this for loop to a forEach loop?

Posted 31 May 2018 - 12:36 PM

Hey,

I have two divs with class demo and want to change their border.
I can do this as follow:

<div class="demo">first div</div>
<div class="demo">second div</div>

let myClass = document.getElementsByClassName('demo');
console.log(myClass); // is an array

 for (i = 0; i < myClass.length; i++) {
   myClass[i].style.border = '1px solid red';
 }


I know that myClass is an array. So, I should be able to iterate through it with forEach method, isn't it?
But how?

Thanks

This post has been edited by kayut: 31 May 2018 - 12:37 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Is it possible to convert this for loop to a forEach loop?

#2 mkkekkonen   User is offline

  • New D.I.C Head

Reputation: 12
  • View blog
  • Posts: 46
  • Joined: 10-May 18

Re: Is it possible to convert this for loop to a forEach loop?

Posted 31 May 2018 - 12:51 PM

If it actually is an array, then

myClass.forEach(function(element) {
  console.dir(element);
});



If it's an array-like, then

Array.prototype.forEach.call(myClass, function(element) {
  console.dir(element);
});



Sometimes you run into array-like containers in Javascript that do not have all the Array prototype methods.
Was This Post Helpful? 2
  • +
  • -

#3 kayut   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 20-January 17

Re: Is it possible to convert this for loop to a forEach loop?

Posted 31 May 2018 - 03:08 PM

View Postmkkekkonen, on 31 May 2018 - 12:51 PM, said:

If it's an array-like, then

Array.prototype.forEach.call(myClass, function(element) {
  console.dir(element);
});



Sometimes you run into array-like containers in Javascript that do not have all the Array prototype methods.


Oh man, thank you for your help. The second solution is working! :-)
Do you know where can I read more about array-lik containers?

Thanks
Was This Post Helpful? 0
  • +
  • -

#4 mkkekkonen   User is offline

  • New D.I.C Head

Reputation: 12
  • View blog
  • Posts: 46
  • Joined: 10-May 18

Re: Is it possible to convert this for loop to a forEach loop?

Posted 01 June 2018 - 12:51 AM

No problem! Glad to help :)/>

View Postkayut, on 01 June 2018 - 12:08 AM, said:

Do you know where can I read more about array-lik containers?


I found this blog post with a quick Google search.
Was This Post Helpful? 1
  • +
  • -

#5 kayut   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 20-January 17

Re: Is it possible to convert this for loop to a forEach loop?

Posted 01 June 2018 - 03:58 PM

Hey,

Meanwhile I found an even better solution:

I can convert the HTML collection myClass, which is an Array-like object first to an array and then use the forEach method over it

var myNewClass = Array.from(myClass);
myNewClass.forEach(function (item) {
  item.classList.add('bg-yellow');
});


Was This Post Helpful? 0
  • +
  • -

#6 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2620
  • View blog
  • Posts: 4,175
  • Joined: 21-June 11

Re: Is it possible to convert this for loop to a forEach loop?

Posted 02 June 2018 - 03:07 AM

In ES6 and later you can also use a for of loop: for (let item of myclass) {...}.
Was This Post Helpful? 1
  • +
  • -

#7 ndc85430   User is online

  • I think you'll find it's "Dr"
  • member icon

Reputation: 832
  • View blog
  • Posts: 3,353
  • Joined: 13-June 14

Re: Is it possible to convert this for loop to a forEach loop?

Posted 02 June 2018 - 05:38 AM

You can also write the function you pass to forEach, map, etc. in a more concise way (if they're a single line):

var values = [1, 2, 3];
values.forEach(v => console.log(v));


This post has been edited by ndc85430: 02 June 2018 - 06:22 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1