使用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） （所以，如果我开始输入史密斯，“管理员”h4应该会消失。

Answer 1

试试这个： - 简单的，但是区分大小写

Demo

  jQuery('#searchBox').on('keyup change', function() {
         var search = $('#searchBox').val();
      $('h4').hide();
      $('h4[id*='+ search + ']').show();

    });

<击>

看看这是否有帮助。我不会使用id来存储字符串比较，因为多个人的名字可能相同，你最终可能会有多个具有相同id的h4。我在这里使用数据属性和jquery数据。

Demo

 jQuery('#searchBox').on('keyup change', function() {
         var search = $('#searchBox').val();
      $('h4').hide().filter(function(_,oj){
       return $(oj).data('key').toLowerCase().indexOf(search.toLowerCase()) > -1;
     //if your are trying to match the text() then do  
     //return $(oj).text().toLowerCase().indexOf(search.toLowerCase()) > -1;
      }).show();
     });

修复代码意味着这一点。没有contains函数和其他几个拼写错误。

Demo

jQuery('#searchBox').on('keyup change', function() {
    var search = $('#searchBox').val();
  //for each h4       
    $('h4').each(function(){
     var h4id = this.id;

        if (h4id.indexOf(search) > -1)
        //if your are trying to match the text() then do  
        //if ($('#'+h4id).text().indexOf(search) > -1)
            $(this).show();
         else
            $(this).hide();
    });
});

Answer 2

.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

Answer 3

尝试使用基于正则表达式的解决方案

jQuery('#searchBox').on('keyup change', function() {
    var search = $(this).val();
    var regex = new RegExp(search, 'i');

    //for each h4       
    $('h4').hide().filter(function(){
        return regex.test(this.id)
    }).show();
});

演示：Fiddle

Answer 4

只需使用jQuery属性选择器，请参阅here，只需两行代码即可。 演示：

//for each h4       
var h4id = $(this).attr('id');
$("h4").hide().filter("[id*=" + h4id + "]").show();