Продвинутая фильтрация с помощью jQuery, нужно направление по наилучшему пути

Question

Мне нужен совет по наилучшему способу выполнения некоторой фильтрации в jQuery.

HTML

У меня есть форма, которая содержит unorderd список атрибутов:

<form name="attrList"> 

    <ul> 
     <li> 
      <input type="checkbox" name="FILTER" value="1+" /> 1+ 
     </li> 
     <li> 
      <input type="checkbox" name="FILTER" value="Adrian Chesterman" /> Adrian Chesterman 
     </li> 
     <li> 
      <input type="checkbox" name="FILTER" value="Green" /> Green 
     </li> 
    </ul> 

</form> 

Тогда у меня есть набор дивы. Я дал DIV атрибут "AttrList", например, так:

<div class="productContainer" attrList="1+,Andy Thomas"> 
    <h3>Some Name Here</h3> 
    <ul> 
     <li>1+</li> 
     <li>Andy Thomas</li> 
    </ul> 
</div> 

JQuery

1. Когда любой вход [имя = FILTER] нажимается, я строю список всех вход [имя = FILTER]: проверено.
2. Я зацикливаюсь на всех divs
3. Во время цикла я проверяю атрибут attrList (например, attrList = "red") на этом div, чтобы увидеть, найдено ли в этом списке то, что было нажато.
4. Если он не найден, я двигаюсь в DIV из виду в другой DIV

JSBin Пример

В приведенном выше примере была упрощена, чтобы вы могли видеть основы того, что Я делал. JSBin Link Here

нужны ваши советы

Это первый раз, когда я пошел о выполнении такой фильтрации; Я просто ищу лучшую практику от того, кто был здесь раньше. Я бы очень признателен за ваши отзывы!

Answer 1

Это не с головы, а не с проверкой или оптимизацией. Но что-то вроде этого должно работать.

//Hide divs with tag value 
function hide_stuff(tag_value) 
{ 
    $(".productContainer") 
    .filter('[attrList*="'+tag_value+'"]') 
    .each(function(i){ 
     $(this).hide() 
    } 
); 
} 
//Bind events to form 
$("form[name='attrList'] input[name='FILTER']").live('change', function(evt){ 
    if($(this).is(':checked')){ 
    var tag = $(this).val(); //e.g. 'Andy Thomas' 
    hide_stuff(tag); 
    } 
}); 

Если вы планируете делать даже промежуточную работу JQuery, эта страница является ПРОЧИТАТЬ http://api.jquery.com/category/selectors/

Edit: Вот как вы могли бы сделать подобную вещь с $ .data вместо (который является только лучше способ хранения данных в атрибутах).

//Hide divs with tag value 
function hide_stuff(tag_value) 
{ 
    $(".productContainer").filter(function() { 
     return $.inArray(tag_value, $(this).data('tags')); //e.g.'Andy Thomas' is 'tags' data 
    } 
    ) 
    .each(function(i){ 
     $(this).hide() 
    } 
); 
} 
//Bind events to form 
$("form[name='attrList'] input[name='FILTER']").live('change', function(evt){ 
    if($(this).is(':checked')){ 
    var tag = $(this).val(); //e.g. 'Andy Thomas' 
    hide_stuff(tag); 
    } 
}); 
//jQuery 1.4.3+ only - http://api.jquery.com/data/ 
<div class="productContainer" data-tags="[1+, Andy Thomas]"> 
    <h3>Some Name Here</h3> 
    <ul> 
     <li>1+</li> 
     <li>Andy Thomas</li> 
    </ul> 
</div>