Question

我正在尝试基于简单的输入字段构建一个小型搜索过滤器。 jquery方法应该fadeOut我的表的所有行，不包含我正在搜索的“名称”。

我知道:contains检查所选元素中的文本，但不知何故，这似乎不适用于该元素的所有子元素。

有没有办法解决这个问题而不在所有孩子中使用.each()循环？

HTML

<input id="searchBar" type="text" class="form-control">

<table class="table table-hover">
    <thead>
        <tr>
            <th>Surname</th>
            <th>First name</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <td>Doe</td>
           <td>John</td>
       </tr>
       <tr>
           <td>Smith</td>
           <td>John</td>
       </tr>
       <tr>
           <td>Johnson</td>
           <td>Ann</td>
       </tr>
       [...]
    </tbody>
</table>

JQuery的

$('#searchBar').keyup(function(){
        var name = $(this).val();
        if(name === "") {
            $( 'tbody>tr' ).fadeIn();
        } else {
            console.log("Search for: "+name);
            $( 'tbody>tr:contains( name )' ).fadeIn();
            $( 'tbody>tr:not(:contains( name ))').fadeOut();
        }
    });

Answer 1

您没有过滤变量。请尝试以下

$( 'tbody>tr:contains('+name+')' ).fadeIn();
$( 'tbody>tr:not(:contains('+name+'))').fadeOut();

JSFiddle

Jquery检查子项是否包含文本

1 个答案: