使用 .each 的 Jquery 搜索过滤器

Question

So I am trying to code a search filter with show and hide features. But I have no clue what to do next after .each function. to make the search actually search through my "alt" attribute under img tag.

// Search filter should be keypress with alt attribute. *** .each 
var $pictureList = $("#gallery img");
 $("#search").onkeypress(function(event){
   $pictureList.each(function(){
     //??? need to go through each "alt" attribute for search filter  
    }); 
});

Thank you!

Answer 1

You can use the attr function of the jQuery to get the alt attribute for each element:

var $pictureList = $("#gallery img");
 $("#search").onkeypress(function(event){
   $pictureList.each(function(){
     if($(this).attr('alt')=='something'){
               //now do what ever you want when it matched the alt attribute
         }
    }); 
});

Answer 2

Try this:

var $pictureList = $("#gallery img");
$("#search").onkeypress(function(event) {
    var re = new RegExp($(this).val());
    $pictureList.each(function() {
        var self = $(this);
        if (self.attr('alt').match(re)) {
            // image match
        }
     }); 
});

if value in search box can contain regex characters you may want to escape it first .