-1

li 内のスパンの内容に基づいて、リストをフィルター処理 (lis の表示/非表示) したいと考えています。現在、何かが機能していますが、一致がどこで発生してもリストをフィルタリングします。最初にシードする必要があるため、スパンの開始時に一致が発生した場合にのみ表示され、それ以外の場合は非表示になります。

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

そのため、「テキスト」でフィルタリングすると、現在最初の 2 つが返されますが、最初の 1 つだけが必要です (「テキスト」という単語が先頭にあるため)。

これは私が現在持っているものです：

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

ありがとう

4

4 に答える 4

0

試す

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
于 2013-11-12T05:25:38.660 に答える
0

これが機能したとしても、括弧をエスケープしようとするなど、あらゆる種類の問題に遭遇します。

より読みやすいものを試してください

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がオプションであることを知っておいてください（ただし、あなたの問題については、上記の解決策を使用します）。

于 2013-11-12T05:25:48.273 に答える
0

試す：

$('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 のテキストが値で始まるかどうかをチェックし、そうであれば表示し、そうでなければ非表示にします。

于 2013-11-12T05:26:28.597 に答える
0

この方法を試してください：

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

}
于 2013-11-12T05:26:32.900 に答える