jquery 使用来自选择/选项的值过滤 ul/li答案

【问题标题】：jquery filter a ul/li using value from select/optionjquery 使用来自选择/选项的值过滤 ul/li
【发布时间】：2014-07-09 04:43:34
【问题描述】：

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

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

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

我相信这应该隐藏所有包含带有“src=”值（图像文件名）但不“包含”所选类别值的图像的 li：

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

也许另一种方法会奏效？

【问题讨论】：

所以您只想隐藏src 属性与catvalue 匹配的对象？对吗？

标签： jquery

【解决方案1】：

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();
});

【讨论】：

不错！我意识到我忘记在 img src 类别名称中包含 _ - 您不必进行切片业务，使其变得更加困难......我没有看到 || 的使用之前，这是简写还是在 jQuery 中？

【解决方案2】：

您可以使用 (drumroll please...) .filter() 方法很好地过滤记录集。

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

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

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

【讨论】：