jquery - 如何按图像源搜索/过滤？

Question

我正在尝试制作一个页面，我可以在其中按图像的源名称进行过滤。

我找到了这个脚本，但它只适用于文本： http: //kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

小提琴：jsfi ddle.net/sVJRk/

我需要按图像源过滤什么？见：jsfi ddle.net/sVJRk/1/

任何建议都会很棒！

Answer 1

在回答标题中提出的问题时，attribute contains selector您正在寻找的是：

$('img[src*="sport"]')

这将选择所有images，其中src属性包含sport。

---

具体到你的问题，有很多问题：

1. 您正在传递$('#list')给listFilter函数，您没有带有 that 的元素id。
2. 然后你在你的函数体内调用$(list)，你已经list作为一个 jQuery 对象传递了，所以不需要再次包装它。
3. 您正在寻找anchors包含给定字符串的字符串，但您的列表中没有任何字符串anchors（您有images）。
4. :Contains如果您只需要检查字符串是否包含在srcof 中，则不需要自定义选择器image（您可以使用属性 contains selector）。

这是上述更改的工作小提琴

Answer 2

Jquery contains filter 是您正在寻找的答案。可以在这里找到一个轻量级版本：http: //jsfiddle.net/artuc/vTQq3/

$('input').on('keyup', function(){
$('.imageList img').not('[src*="'+$(this).val()+'"]').hide();
$('.imageList img[src*="'+$(this).val()+'"]').show();
});