Измените CSS последнего элемента в столбце

Question

У меня есть таблица из 6 строк и 7 столбцов. Каждая ячейка изначально представляет собой серый круг. Когда я нажимаю на кружок, мне нужно изменить цвет фона последнего не синего круга с того же столбца, начиная с нижнего ряда на синий.

Этот код работает, только если круги в последнем ряду серые. Это не изменит цвет круга от второго до последнего ряда, если круг в последнем ряду синий. Любая помощь или советы приветствуются!

$(".circle").click(function() {
  var colindex = $(this).closest('td').index() + 1;

  for (i = 6; i > 0; i--) {
    var cell = $('tr:nth-child(' + i + ') td:nth-child(' + colindex + ')');
    if (cell.find('div').css('background-color') === 'blue') {
      i--;
    } else {
      cell.find('div').css('background-color', 'blue');
      break;
    }
  }
})

table {
  margin: auto;
  width: 50% !important;
}

.circle {
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: #706e6e;
  border: 4px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
</table>

Answer 1

Похоже, что .css('background-color') не может совпадать с именем цвета, но оно должно совпадать со значением RGB. Таким образом, эквивалент синему равен rgb(0, 0, 255). Также, если он распознает последний элемент как синий, ему не нужно будет повторять i--, потому что на следующем цикле он будет повторяться снова минус 1, добавляя его к предыдущему, повторять минус 2.

Ваш для l oop код должен быть таким:

for (i=6;i>=0;i--){

    var cell = $('tr:nth-child('+i+') td:nth-child('+colindex+')');

    if(cell.find('div').css('background-color')!=='rgb(0, 0, 255)'){

        cell.find('div').css('background-color','blue');
        break;

    }
}

Answer 2

Для достижения своей цели вы можете получить индекс td, который содержит нажатой .circle. Оттуда вы можете получить все .circle элементы в столбце. Если затем вы используете класс для установки стиля на соответствующих кружках, .blue в приведенном ниже примере, вы можете извлечь последний доступный кружок и добавить к нему класс. Как то так:

$(".circle").click(function() {
  let $circle = $(this);
  let colIndex = $circle.closest('td').index();
  $circle.closest('table')
    .find('tr td:nth-child(' + (colIndex + 1) + ') .circle:not(.blue):last')
    .addClass('blue');
})

table {
  margin: auto;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #706e6e;
  border: 4px solid black;
}

.circle.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
</table>

Обратите внимание, что в этом примере я только уменьшил круги, чтобы они лучше подходили к фрагменту.