JS隱藏元素的條件

Question

你好，我有這個很酷的腳本，它過濾了一個單詞列表，當輸入一些字母時，我真的希望這對其他人也有用。

你可以看到它在這裏的行動：FIDDLE

我的代碼：

<input id="filter" /> 
<ul id="productlist"> 
    <li><h2>Andy</h2><span>some text</span></li> 
    <li><h2>Sandra</h2><span>some text</span></li> 
    <li><h2>Pizza</h2><span>some text</span></li> 
    <li><h2>Drink</h2><span>some text</span></li> 
</ul> 

var $products = $('#productlist li h2'); 
$('#filter').keyup(function() { 
    var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive 
    $products.show().filter(function() { 
     return !re.test($(this).text()); 
    }).hide(); 
}); 

所以我需要它來隱藏不僅H2但是它裏面的內容全li元素。 PS：請不要告訴我改變var $ products = $（'＃productlist li h2'）;至var $ products = $（'＃productlist li'）; 我需要搜索爲h2元素

Answer 1

只是工作，你應該能夠只是做：

var $products = $('#productlist li'); 
$('#filter').keyup(function() { 
    var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive 
    $products.show().filter(function() { 
     return !re.test($('h2',this).text()); 
    }).hide(); 
}); 

活生生的例子：http://jsfiddle.net/7CVgL/

（注：香港專業教育學院做了什麼，你問我要不要但它仍然只搜索h2元素的內容）