javascript - 过滤列表用jQuery

Question

我想根据 li 中 span 的内容过滤列表（显示/隐藏 lis）。目前我有一些工作，但无论匹配发生在哪里，它都会过滤列表。我需要将其播种到开始，因此只有匹配发生在跨度开始时才会显示，否则将被隐藏。

<li><img/><span>text</span></li>
<li><img/><span>other text</span></li>
<li><img/><span>other words</span></li>

所以，如果我过滤“文本”，目前将返回前 2 个，而我只想要第一个（因为“文本”这个词在它的开头）。

这是我目前拥有的：

var value = $("#listcontainer ul#list input").val();
if(value == '') {
    $('ul#list> li').show(); //show all, if nothing entered
} else {
    $('ul#list > li:not(.plain):not(:contains(' + value + '))').hide(); 
$('ul#list > li:not(.plain):contains(' + value + ')').show();
} //.plain = li which contains the text input 

谢谢

Answer 1

尝试

var value = $("#listcontainer ul#list input").val().toLowerCase();
if (value == '') {
    $('ul#list> li').show(); //show all, if nothing entered
} else {
    var $lis = $('ul#list > li:not(.plain)').filter(function () {
        return $.trim($(this).text()).toLowerCase().indexOf(value) == 0;
    });
    $('ul#list > li:not(.plain)').not($lis).hide();
    $lis.show();
} //.plain = li which contains the text input

Answer 2

即使你让它工作，你也会遇到各种试图逃避括号等的问题。

尝试更具可读性

var value = $("#listcontainer ul#list input").val();
if(value == '') {
    $('ul#list> li').show();
} else {
    $('ul#list > li').each(function() {
        if($(this).text() == value) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}

另外，知道这filter是一个选项（尽管对于您的问题，我会选择上面的解决方案）。

Answer 3

尝试：

$('ul#list > li:not(.plain)').text(function(i, text) {
   var show = text.slice(0, value.length) === value;//starts with value
   $(this).toggle(show);//if starts with val show otherwise hide
});

这将检查每个 li 的文本是否以该值开头，如果是则显示，否则隐藏它。

Answer 4

试试这种方式：

var value = $("#listcontainer ul#list input").val();
if(value == '') {
    $('ul#list> li').show(); //show all, if nothing entered
} else {
    $('ul#list > li').each(function() { $(this).toggle(
                                          $(this).find('span').text() == value); });

}