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

Я пытаюсь применить этот стиль ко всем / любому элементу, который соответствует имени класса. Я попробовал [0,1,2], потому что у меня всего 3 экземпляра, но он нацелен только на третий экземпляр.

Это не обязательно для работы в производстве. Просто в Хроме. Это всего лишь прототип.

0
colmtuite 8 Окт 2018 в 02:59

2 ответа

Лучший ответ

Когда вы помещаете запятые между значениями внутри квадратных скобок, вы вызываете оператор запятой , который оценивает каждый элемент в списке, разделенном запятыми, а затем вычисляет последнее значение в списке. Таким образом, ваш код оценивается как [2] или только третий элемент. Как правило, если у вас есть объект, подобный массиву, с левой стороны, вам необходимо указать одиночное значение в следующих квадратных скобках, например [0] или [1].

Если вы хотите применить этот стиль к первым трем элементам списка, вам придется явно перебирать их. Например, одна возможная реализация:

const buttons = document.querySelectorAll('.big-button');
const firstThreeButtons = Array.prototype.slice.call(buttons, 0, 3);
firstThreeButtons.forEach(button => button.style.display = 'inline-flex');
7
CertainPerformance 8 Окт 2018 в 00:02

Есть N способов добиться этого.

  1. создайте функцию, которая будет проходить через индексы массива и делать ваши вещи:
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>
  1. кешировать результат в переменную и вызывать операцию 3 раза:
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>
  1. используя 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>
  1. используя 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>
1
num8er 8 Окт 2018 в 00:24