Как найти наибольшее число в элементе и добавить класс?

Question

[Юпитер Макс]

Всем привет. Есть такая разметка.

// элементы с числами
<div class="10">10</div>
<div class="20">20</div>
<div class="30">30</div>

// кнопка для нажатия
<div>Клик плюс</div>

// число для изменения по клику
<div>1</div>

по нажатию на кнопка для нажатия я буду прибавлять на 1 число для изменения по клику

Вопрос: как мне сравнить итоговое число с каждым числом в элементе и добавить нужный класс, если итоговое совпадает или больше

Comments

[Alex]

Вы не можете алгоритм составить? В чем конкретно у вас сложности?

[Роман]

Не понятно. К чему прибавляться будет число? Ко всем трём div, к первому, второму, или вообще к чему то другому?

[Юпитер Макс]

Alex, ну да )) не могу сообразить, как мне сравнить мое итоговое число с каждым числом 10, 20, 30 и если к примеру итоговое будет больше 10 то этому элементу добавить класс, если итоговое будет больше 20, добавить этому элементу класс, а у элемента с числом 10 удалить класс и т.д. )))

Answer 1

[0xD34F]

$('.button').click(function() {
  const val = +$('.value').text((i, text) => +text + 1).text();

  $('.item')
    .removeClass('xxx')
    .filter((i, el) => +$(el).text() <= val)
    .sort((a, b) => $(a).text() - $(b).text())
    .last()
    .addClass('xxx');
});

или

document.querySelector('.button').addEventListener('click', () => {
  const val = ++document.querySelector('.value').innerText;
  const items = Array.from(document.querySelectorAll('.item'), n => [ n, +n.innerText ]);
  const max = items.reduce((max, n) => n[1] <= val && n[1] > max ? n[1] : max, -Infinity);
  items.forEach(n => n[0].classList.toggle('xxx', n[1] === max));
});

Answer 2

[ThunderCat]

array.sort()?