使用 :contains 的 JQuery 过滤器

Question

我是这一切的新手，并且在使用 :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();
});

小提琴住在http://jsfiddle.net/2fEzS/

Answer 1

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

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

或者：

$(".filter div").click(function (e) {
    $('.holder').addClass('invisible')
                .removeClass('visible')
                .filter(':contains(' + $(this).text()  + ')')
                .removeClass('invisible')
                .addClass('visible');
});

http://jsfiddle.net/kdRzQ/

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

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