根据数据属性范围显示 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>

我有 slider 它给了我最小值和最大值。 等等

min = 200;
max = 400;

如何使用 jquery 过滤（仅显示）日期时间值介于 200 和 400 之间的元素？

我试过了：

     $( "#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()作为 getter 自动转换为数字），对于每个元素，如果超出/超出范围，则应用 display 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();
        }
    }
});