jquery - 在 jquery 中自定义搜索过滤器

Question

当用户输入时，我已经使用jquery实现了一个搜索过滤器。我希望当用户输入时过滤标题和子元素。问题是当我搜索子元素时，即。 333(fiddler中所示的例子)，222也出现了，这是不应该发生的；只有 333 应该被过滤。

$("#search").keyup(function () {
    var SEARCHWORD = this.value;

    $("#list li").each(function () {
        $(this).hide();

        $('h3:contains(' + SEARCHWORD + ')').closest('li').show();
        $('table:contains(' + SEARCHWORD + ')').closest('li').show();
        $('table:contains(' + SEARCHWORD + ')').show().siblings('table').hide();

        if (SEARCHWORD == "") {
            $('#list').find('table:hidden').show();
        }
    });
});

我已附加 jsfiddle 链接“My Test Fiddle”

Answer 1

简单的解决方案是在每个表行 (tr) 之前添加表，而不是将 2 个 tr 放入 1 个表中。

HTML:

<ul id='list'>
    <li id='a1'>
         <h3>Header1</h3> 
        <table>
            <tr>
                <td>aaa</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xxx</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>def</td>
            </tr>
        </table>
    </li>
    <li id='a2'>
         <h3>Header2</h3> 
        <table>
            <tr>
                <td>333</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>222</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>111</td>
            </tr>
        </table>
    </li>
</ul>

jQuery(未更改)

$("#search").keyup(function () {
    var SEARCHWORD = this.value;
     $("#list li").each(function () {
        $(this).hide();
        $('h3:contains(' + SEARCHWORD + ')').closest('li').show()
        $('table:contains(' + SEARCHWORD + ')').closest('li').show();
        $('table:contains(' + SEARCHWORD + ')').show().siblings('table').hide();
        if (SEARCHWORD == "") {
            $('#list').find('table:hidden').show();
        }
    });
});

JSFiddle demo