Jquery检查子项是否包含文本

Question

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

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

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

JSFiddle:http://jsfiddle.net/Q6sHG/

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