Jquery - кнопка Onclick запускает все div внутри класса

Question

Я новичок в Jquery, поэтому, пожалуйста, извините меня, если я задаю простой вопрос, но мне нужна помощь.

В моей разметке HTML у меня есть 3 деления с идентификатором от test1 до test3 и кнопка.

<input type="button" id="button_click" value="ok" />
<div class="supercolor" style="width:100px;">
  <div class="colordiv" id="test1" >&nbsp;</div>
  <div class="colordiv" id="test2" >&nbsp;</div>
  <div class="colordiv" id="test3">&nbsp;</div>
</div>

То, что я хочу сделать, - это нажать кнопку, я хочу перебрать все элементы div в классе 'supercolor', чтобы изменить цвет фона CSS для div.

Код, который у меня естьсейчас

$('#button_click').click(function(){
   $('div.supercolor').each(function() {
   $(this).css("background-color","red");
   });
});

Answer 1

$('#button_click').click(function() {
    $('.supercolor > div').css('background-color', '#f00');
});

Answer 2

на самом деле, если они будут одного цвета, вы можете просто сделать то, что предложил Minitech.но ради полноты.

вы просто пропустили div в вашем .each.

$('#button_click').click(function(){
   $('div.supercolor > div').each(function() {
   $(this).css("background-color","red");
   });
});

Answer 3

$('div.supercolor div').css('background-color', 'red');

Это, вероятно, то, что вам нужно.