Iterating through class names and hiding some in vanilla js

Question

Stumped and I am sure there is an easy explanation to this.

So I want to iterate through all of the class names called 'images' and hide say the last 4:

images = document.getElementsByClassName("images");


for (var i = 0; i < images.length; i++) {
  if(images[i] == images[5] || images[6] || images[7] || images[8]) {
    images[5].style.display = "none";
    images[6].style.display = "none";
    images[7].style.display = "none";
    images[8].style.display = "none";
  }
}

Is there anyway of making this code shorter? Seems a bit laborious if you were to have loads of images.

No frameworks on this please! Many thanks for your help.

See https://stackoverflow.com/questions/4535647/logical-operators-in-javascript-how-do-you-use-them — trincot, Jul 20 '18 at 21:32
Before thinking of *shorter* code, think of *correcting* your code. It does not do what you intended. — trincot, Jul 20 '18 at 21:33
You could try something like `let lastFourImages = images.slice(-4)`, then do a `switch` over those. But @trincot is pointing you to good sources. — hcs, Jul 20 '18 at 21:35
https://stackoverflow.com/questions/9121395/javascript-the-prettiest-way-to-compare-one-value-against-multiple-values — trincot, Jul 20 '18 at 21:35

SirPilan · Accepted Answer · 2018-07-20T21:43:18.960

Looking for a shorter version?

images = document.getElementsByClassName("images");

for (var i = 0; i < images.length; i++) {
  if( i >= images.length-4 ) { // Last 4
    images[i].style.display = "none";
  }
}

1<img class="images" src="https://via.placeholder.com/50x50"><br/>
2<img class="images" src="https://via.placeholder.com/50x50"><br/>
3<img class="images" src="https://via.placeholder.com/50x50"><br/>
4<img class="images" src="https://via.placeholder.com/50x50"><br/>
5<img class="images" src="https://via.placeholder.com/50x50">

Or another Version mentioned by @Hector

images = [...document.getElementsByClassName("images")].slice(-4); // last 4

for( let i in images ) {
  images[i].style.display = "none";
}

1<img class="images" src="https://via.placeholder.com/50x50"><br/>
2<img class="images" src="https://via.placeholder.com/50x50"><br/>
3<img class="images" src="https://via.placeholder.com/50x50"><br/>
4<img class="images" src="https://via.placeholder.com/50x50"><br/>
5<img class="images" src="https://via.placeholder.com/50x50">

My bad, meant to say loop, not switch. – hcs Jul 20 '18 at 21:44 — hcs, Jul 20 '18 at 21:44

score 0 · Answer 2 · answered Jul 20 '18 at 21:31

You were pretty close. You can hide the last 4 by doing some simple math and then hiding by index.

images = document.getElementsByClassName("images");

const numberToHide = 4;
const totalImages = images.length;
for (var i = 0; i < totalImages; i++) {
  const indexToHide = totalImages - numberToHide;
  if (i >= indexToHide) {
    images[i].style.display = "none";
  }
}

<div class="images">1</div>
<div class="images">2</div>
<div class="images">3</div>
<div class="images">4</div>
<div class="images">5</div>
<div class="images">6</div>
<div class="images">7</div>

score 0 · Answer 3 · 2018-07-20T21:38:23.727

You can check if the number of elements subtracted by the value of i in the for loop is less than or equal to 4 to hide the last 4 elements.

1<img class="image" src="somesource">
<br/>
2<img class="image" src="somesource">
<br/>
3<img class="image" src="somesource">
<br/>
4<img class="image" src="somesource">
<br/>
5<img class="image" src="somesource">
<br/>
6<img class="image" src="somesource">
<br/>
7<img class="image" src="somesource">
<br/>
8<img class="image" src="somesource">
<br/>
<script>
var images = document.getElementsByClassName("image");


for (var i = 0; i < images.length; i++) {
  if(images.length - i <= 4){
   images[i].style.display = "none";
  }
}
</script>

score 0 · Answer 4 · answered Jul 20 '18 at 22:03

First of all, if(images[i] == images[5] || images[6] || images[7] || images[8]) is not how you compare a value with several others. The || operator is intended for boolean logic, so you would need to repeat the == comparison to make that correct (but not short). See also this Q&A.

The shortest, in combination with matching the DOM elements, is probably achieved with Array.from:

Array.from(document.querySelectorAll(".images"),(img,i)=>img.style.display=i>4?"none":"");

<div class="images">0</div>
<div class="images">1</div>
<div class="images">2</div>
<div class="images">3</div>
<div class="images">4</div>
<div class="images">5</div>
<div class="images">6</div>
<div class="images">7</div>

Iterating through class names and hiding some in vanilla js

4 Answers4