Как использовать. css () метод с массивом?

Question

Мне нужно применить стиль ко всем элементам класса.

const history_cells = $(".history-cell");

for (var i = 0; i < history_cells.length; i++) {
    history_cells[i].css({"opacity": "1"});
}

Но иметь

Uncaught TypeError: history_cells [i]. css не является функцией.

Где я не прав?

Answer 1

jQuery обрабатывает наборы элементов так же, как это было бы с одним элементом, поэтому

$(".history-cell").css({"opacity": "1"})

выполняет свою работу.

С другой стороны, я настоятельно рекомендую не делать этого. использовать встроенные стили. Скорее сделайте это:

$(".history-cell").addClass('opaque');

и добавьте этот класс в ваш CSS:

.opaque { opacity: 1; }

Answer 2

Измени немного

const history_cells = $(".history-cell");

for (var i = 0; i < history_cells.length; i++) {
    $(history_cells[i]).css({"opacity": "1"});
}

Answer 3

Вы можете избавиться от ошибки простым способом

$(history_cells[i]).css({"opacity": "1"});

Однако вы также можете сделать это, как показано ниже

$(".history-cell").css({"opacity": "1"});

Answer 4

Это синтаксис foreach l oop в jquery лучше, чем для l oop

$(".a").each(function(i,e) {
   $(this).html(i);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<ul>

Answer 5

Вы можете использовать класс, используя jquery 2 типа. Сначала вы можете создать CSS класс, а затем применить его.

$('your input').addClass('class Name');

Например:

$('.history-cell').addClass('opacity');

Второй Вы можете применить его напрямую, используя следующее:

$('your input').css({"your need(backgroundcolor, font or etc)":"value(color,size px or %)"});

Например:

$('.history-cell').css({"opacity": "1"});

Применение стиля с использованием l oop:

$(".history-cell").each(function(){
    $(this).css("opacity", "1");
    //Or use direct class is better
    $(this).addClass('opacity');   
});