Question

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

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

所以，如果我过滤＆＃34; text＆＃34;，目前前2个将被返回，而我只想要第一个（因为单词＆＃34; text＆＃34;在它的开头）

这就是我目前所拥有的：

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); });

}

使用jquery </li>过滤列表<li>

4 个答案: