JQuery过滤器使用：contains

我对所有这些都不熟悉，在使用：contains过滤一堆div时，我很难识别父元素？ 我的最终结果是有3个按钮，单击这些按钮时，可以检查一个div是否包含一个特定的单词，如果是，则将一个类应用于包含的div，将另一个类应用于所有其他div。。基本上是隐藏和显示它们

我有一把小提琴，它不起作用，但显示了我试图创造的想法

我知道的代码不起作用，但给出的过程是

$(".manchester").click(function (e) {
    if ($('.address:contains("Manchester")').length) {
        $('holder').addClass('visible');
    }
    if ($('.address:contains("London")').length) {
        $('.holder').addClass('invisible');
    }
    if ($('.address:contains("Paris")').length) {
        $('.holder').addClass('invisible');
    }
    e.preventDefault();
});

---

而fiddle的位置是

逻辑是错误的，您实际上并不过滤元素，而是定义几个处理程序，您可以使用单击元素的文本内容来缩小代码。我建议：

$(".filter div").click(function(e) {
    $('.holder').hide() // hide all the selected elements
                .filter(':contains(' + $(this).text()  + ')')
                .show(); // show the filtered elements
});

或：

请注意，div元素不应用作按钮，并且它没有要阻止的默认操作，因此preventDefault在代码中不起任何作用。此外，如果文档中有许多元素，最好将这些元素缓存在单击处理程序的上下文之外：

var $holders = $('.holder');   
$(".filter div").click(function (e) {
    $holders.addClass('invisible') // ...
});

---

逻辑是错误的，您实际上并不过滤元素，而是定义几个处理程序，您可以使用单击元素的textContent缩小代码。我建议：

$(".filter div").click(function(e) {
    $('.holder').hide() // hide all the selected elements
                .filter(':contains(' + $(this).text()  + ')')
                .show(); // show the filtered elements
});

或：

请注意，div元素不应用作按钮，并且它没有要阻止的默认操作，因此preventDefault在代码中不起任何作用。此外，如果文档中有许多元素，最好将这些元素缓存在单击处理程序的上下文之外：

var $holders = $('.holder');   
$(".filter div").click(function (e) {
    $holders.addClass('invisible') // ...
});

您正在隐藏类.holder中的所有div，而不仅仅是影响contains位的div

将代码更改为：

$(".manchester").click(function (e) {
    $('.address:contains("Manchester")').closest('.holder').addClass('visible');
    $('.address:contains("London")').closest('.holder').addClass('invisible');
    $('.address:contains("Paris")').closest('.holder').addClass('invisible');
    e.preventDefault();
});

如果div包含“paris”而不是“paris”，那么它是区分大小写的，不会被隐藏

请参见

您正在隐藏类.holder中的所有div，而不仅仅是影响contains位的div

将代码更改为：

$(".manchester").click(function (e) {
    $('.address:contains("Manchester")').closest('.holder').addClass('visible');
    $('.address:contains("London")').closest('.holder').addClass('invisible');
    $('.address:contains("Paris")').closest('.holder').addClass('invisible');
    e.preventDefault();
});

如果div包含“paris”而不是“paris”，那么它是区分大小写的，不会被隐藏

---

请参见

是否可以添加重置过滤器的“全部显示”按钮？是否可以添加重置过滤器的“全部显示”按钮？