Как найти нужный элемент удовлетворяющий условиям нескольких data-attr?

Question

[Илья Паршаков]

Добрый день!
К примеру есть переменная id со значением 10.
На странице есть несколько блоков с data-from и data-to, в которых заключен некий числовой диапазон.
Как найти нужный блок, диапазон которых удовлетворяет значению переменной id?

<ol class="list">
    <li class="result" data-from="0" data-to="5" style="display: none">A</li>
    <li class="result" data-from="6" data-to="15" style="display: none">B</li>
    <li class="result" data-from="16" data-to="20" style="display: none">C</li>
    <li class="result" data-from="21" data-to="25" style="display: none">D</li>
</ol>

Answer 1

[0xD34F]

$('.result').filter((i, { dataset: d }) => d.from <= id && id <= d.to)

Comments

[Илья Паршаков]

Спасибо большое! У меня не получается применить код и нужный элемент показать (к примеру все элементы display none, а тот что удовлетворяет условиям добавить show())

[0xD34F]

Можно до фильтрации сделать hide, после - show:

$('.result')
  .hide()
  .filter((i, { dataset: d }) => d.from <= id && id <= d.to)
  .show()

[Илья Паршаков]

0xD34F, супер! в очередной раз, огромное вам спасибо за помощь!