Я пытаюсь динамически фильтровать результаты поиска. С каждым результатом связаны теги, которые используются в качестве классов.
<div class="search_results">
<div class="html php jquery">
I can do HTML, PHP and JQuery.
</div>
<div class="jquery asp pascal">
I can do jQuery, ASP, and Pascal.
</div>
<div class="php basic webOS">
I am a PHP, Visual Basic, and WebOS expert.
</div>
</div>
Я хочу динамически выбирать результаты на основе тега. Я понимаю, как сделать это статически:
/* Hide all search results */
jQuery(".search_results div").hide();
/* Show everything with .php and .jquery tags */
jQuery(".search_results .php, .search_results .jquery").show()
Однако мне нужно, чтобы это происходило динамически на основе списка отмеченных флажков.
<div class="filters">
<input type="checkbox" value="php" />
<input type="checkbox" value="jquery" />
<input type="checkbox" value="webOS" />
etc..
</div>
Когда эти флажки установлены, я хочу отфильтровать результаты.
Мой вопрос: какую функцию я бы использовал для этого? Каждый результат страницы имеет различную коллекцию тегов. Было бы что-то вроде этого?
// Create new array
var filter_array = new Array();
// wait for a filter checkbox to be clicked
jQuery(".filters input").click(function() {
// Cycle through all input fields, and focus only on checked ones
jQuery('.filters input:checked').each( function() {
// Add current value to array
filter_array.push(jQuery(this).val());
});
// Now filter the results
for(i=0; i< filter_array.length;i++) {
// Hide all results
jQuery(".search_results div").hide(); /* Hide all search results */
// What do I do here to make sure elements that are dipslayed meet all the filter criteria?
}
});
Кроме того, я должен использовать функцию цикла? Есть ли способ сделать это быстрее? Предположим, у меня может быть до 50-100 элементов результата на одной странице. Я не очень знаком с оптимизацией jQuery, поэтому я пытаюсь найти наиболее эффективный способ сделать это.
Спасибо.