Return all elements matching class name

Question

document.getElementsByClassName('big-button')[0,1,2].style.display = "inline-flex";

I'm trying to apply that style to all/any element that matches the class name. I tried [0,1,2] because I just have 3 instances, but it only targets the third instance.

This does not need to work in production. Just in Chrome. It's just prototyping.

CertainPerformance · Accepted Answer · 2018-10-08 00:02:44Z

When you put commas between values inside square brackets, you're invoking the comma operator, which evaluates each item in the comma-separated list, and then evaluates to the final value in the list. Thus, your code evaluates to [2], or only the third item. Generally, if you have an array-like object on the left hand side, you need to provide a single value in the following square brackets, like [0] or [1].

If you want to apply that style to the first three elements of the list, you'll have to explicitly iterate over them. For example, one possible implementation is:

const buttons = document.querySelectorAll('.big-button');
const firstThreeButtons = Array.prototype.slice.call(buttons, 0, 3);
firstThreeButtons.forEach(button => button.style.display = 'inline-flex');

num8er · Accepted Answer · 2018-10-08 00:24:13Z

There are N counts of ways to achieve it.

make a function which will walk through array indexes and do Your stuff:

function borderRed(className, elementIndexes) {
  elementIndexes.forEach(index => {
    document.getElementsByClassName(className)[index].style = "border: 1px solid red";
  });
}

borderRed('big-button', [0, 2, 4]);

<button class="big-button">1</button>
<button class="big-button">2</button>
<button class="big-button">3</button>
<button class="big-button">4</button>
<button class="big-button">5</button>
<button class="big-button">6</button>

cache result to variable and call operation 3 times:

var buttons = document.getElementsByClassName('big-button');

buttons[0].style = 'border: 1px solid red';
buttons[2].style = 'border: 1px solid red';
buttons[4].style = 'border: 1px solid red';

<button class="big-button">1</button>
<button class="big-button">2</button>
<button class="big-button">3</button>
<button class="big-button">4</button>
<button class="big-button">5</button>
<button class="big-button">6</button>

using jquery

$(function() {
  $('.big-button').slice(0, 3).css('border', '1px solid red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="big-button">1</button>
<button class="big-button">2</button>
<button class="big-button">3</button>
<button class="big-button">4</button>
<button class="big-button">5</button>
<button class="big-button">6</button>

using document.querySelector

var buttons = document.querySelectorAll('.big-button:nth-child(1),.big-button:nth-child(3),.big-button:nth-child(5)');

buttons.forEach(button => button.style = 'border: 1px solid red');

<button class="big-button">1</button>
<button class="big-button">2</button>
<button class="big-button">3</button>
<button class="big-button">4</button>
<button class="big-button">5</button>
<button class="big-button">6</button>

Collectives™ on Stack Overflow

Return all elements matching class name

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related