javascript - 使用 jQuery 搜索元素属性值

Question

我正在尝试通过隐藏不符合要求的内容来在屏幕上进行过滤。

到目前为止，这是我想出的。我不确定我做错了什么。

jQuery :

jQuery('#searchBox').on('keyup change', function() {
    var search = $('#searchBox').val();
    

    //for each h4       
    $('h4').each(function(){
     var h4id = $(this).attr('id');
        if ($(h4id).contains(search))
            $(this).show();
         else
            $(this).hide
    });

HTML:

<input type="search" name="search" id="searchBox"/>

<h4 id="Adminstrator">Administrator</h4> 
<h4 id="John,Smith">John Smith</h4> 
<h4 id="Jane,Smith">Jane Smith</h4>  

(我正在使用 jQuery 1.9.1)(所以，如果我开始输入 Smith，“Administrator”h4 应该会消失。

Answer 1

.contains 不会给你选择器的文本内容。它只会搜索选择器内的元素。

试试这个方法.. 这可以更优化

jQuery('#searchBox').on('keyup change', function () {
    var search = $('#searchBox').val().toLowerCase();

    $('h4').hide();
    $('h4').each(function () {
        var h4id = $(this).attr('id'),
            $text = $('#'+ h4id).text().toLowerCase();
        if($text.indexOf(search) > -1) 
            $(this).show();
    });

}); 

确保您的id是唯一的。

接下来是你的id不应该包含,

JSFIDDLE