Показать элементы li на основе диапазона атрибутов данных

Question

У меня есть HTML как:

<ul>
<li data-time="450">...</li>
<li data-time="430">...</li>
<li data-time="550">...</li>
<li data-time="750">...</li>
<li data-time="80">...</li>
<li data-time="170">...</li>
</ul>

, и у меня есть слайдер, который дает мне минимальное и максимальное значения. и т.д.

min = 200;
max = 400;

Как я могу фильтровать (показывать только) элементы, где значения даты и времени находятся между 200 и 400, используя jquery?

Я пытался:

     $( "#slider-range" ).on( "slidechange", function( event, ui ) {
        console.log(ui.values);
$('li').hide();
        min = ui.values[0];
        max = ui.values[1];
        //dont know to show only <li> elements between min and max
    } );

Answer 1

Вы можете использовать .each() для итерации элементов. Извлеките data-time (используя .data(), поскольку получатель автоматически преобразует число), для каждого элемента примените отображение none или block, если оно выходит / находится в границах.

var min = 200;
var max = 500;

$( "li" ).each(function() {
  var $this = $(this);
  var time = $this.data('time');
  
  $this.css('display', (time < min || time > max) ? 'none' : 'block');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li data-time="450">450</li>
  <li data-time="430">430</li>
  <li data-time="550">550</li>
  <li data-time="750">750</li>
  <li data-time="80">80</li>
  <li data-time="170">170</li>
</ul>

Answer 2

Эй, попробуй этот фрагмент.

$( "#slider-range" ).on( "slidechange", function( event, ui ) {
    console.log(ui.values);

    // hide all
    $('li').hide();

    // loop between min and max and select and show the ones the exist
    min = ui.values[0];
    max = ui.values[1];
    for(var value=min;value<=max;value++) {
        var liElement = $("li[data-time='"+ value +"']");
        if(liElement) {
            liElement.show();
        }
    }
});