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