Question

好的，这可能已经得到了回答，但我似乎无法找到确切的解决方案。 Jquery对我来说仍然有点新鲜，我怀疑我没有正确选择我需要的元素。

我有一个select /选项，我想更改ul / li中显示的与select /选项对应的项目。 ul / li包含页面上显示的图像，我正在尝试对它们进行分类/过滤我有另一个PHP函数创建图像列表并从目录收集所有文件名，但由于我不想刷新页面，我希望使用jQuery过滤li并仅显示图像（使用适当的图像）在其文件名中匹配标记，如本例中的text =“value”，但在页面中，weach实际文件名具有标记）用于所选类别。

我有一个小提琴：http://jsfiddle.net/mvprzy/RS6Ah/5/

我认为这应该隐藏包含图像的所有li，其中'src ='值（图像文件名）不包含所选类别的值：

// hide those li's that don't match
$("#ul_svg").children.not(:contains(catvalue)).hide();

也许一种不同的方法可行？

Answer 1

您可以使用（鼓励请...）.filter()方法很好地过滤记录集。

$('#ul_svg').children().filter({
    var self = this,
        re = new RegExp(catvalue,'g');

    return re.test(self.src);
}).hide();

这使用正则表达式查找与src匹配的每个对象catvalue中的项目，并在隐藏之前将集合过滤到这些对象。

Answer 2

WORKING JSFIDDLE DEMO

$(document).ready(function () {
    $("#catselect").change(function () {        
        var catvalue = this.value,
            ul = $('#ul_svg');
        ul.children('li').show();
        catvalue === 'all' || ul.children('li').filter(function() {
            return $(this).children('img')[0].src.indexOf(catvalue.slice(1)) === -1;
        }).hide();
    })
    .change();
});

jquery使用select / option中的值过滤ul / li

2 个答案: