Фильтр JQuery с использованием: содержит

Question

Я новичок во всем этом и борюсь с идентификацией родительского элемента при использовании: содержит для фильтрации кучи divs? Мой конечный результат состоит в том, чтобы иметь 3 кнопки, которые при нажатии проверяют, содержит ли div определенное слово, и если это применит класс к содержащему div, а другой класс - ко всем другим divs .. по существу скрывает и показывает их.

У меня есть скрипка, которая не работает, но показывает идею, которую я пытаюсь создать.

Код, который я знаю, не работает, но дает процесс;

$(".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') // ... 
}); 

Answer 2

Вы скрывающие все div S с классом .holder, а не только тот, который влияют на бит contains.

Изменить код:

$(".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 содержит «париж» вместо «Париж», который не получит скрыт.

См. http://jsfiddle.net/2fEzS/19/