Как выборочно отображать и скрывать элементы с помощью jQuery

Во-первых, прошу прощения за объем кода, который я собираюсь сбросить.

Текущее поведение: при нажатии на li идентификатор данных помещается в массив или удаляется из него, и отображаются строки таблицы с классами из массива, а все остальные строки таблицы скрываются. Цель - отфильтровать строки из таблицы, которые не соответствуют выбору пользователей.

Проблема: Если я выберу место «Канны» из ul.location, а затем выберу «Вилла» и «Отель» из ul.propertytype, я могу в конечном итоге показать строки в таблице, которые не обязательно относятся к виллам и отелям в Каннах, I ' я получу виллы и отели в Каннах и любой другой ряд свойств, содержащий классы Villa, Hotel или Cannes.

Желаемое поведение: Я хочу видеть ТОЛЬКО виллы и отели в Каннах. Или, например, если я выберу «Канны» и «Эз» из местоположений и «Вилла» и «Отель» из типов свойств, я хочу видеть только виллы и отели в Каннах и Эз.

Я играл с: видимыми селекторами, циклами foreach и т. д., Но это выходит за рамки меня.

Итак, вот мои фильтры Есть еще 3 фильтра, но для простоты я включил только 2, остальные не имеют разницы в коде.

Локации (в живом коде их более 30)

<ul class = "location" multiple = "">                   
    <li data-id = "term_87" class = "">Cannes</li>
    <li data-id = "term_88">Cap d'Antibes &amp; Juan les Pins</li>
    <li data-id = "term_133" class = "">Eze</li>
</ul>

Типы свойств (в реальном коде их более 30)

<ul class = "propertytype others" multiple = "">                    
    <li data-id = "villa">Villa</li>      
    <li data-id = "hotel">Hotel</li>                  
    <li data-id = "hotelVillas">Hotel Villas</li> 
</ul>

Таблица рядов свойств Super Simplified (более 1200 в живом коде)

<table class = "elegant_list_properties">
 <tr id = "1" class = "propertyrow cannes villa">
    <td>some stuff</td>
 </tr>
 <tr id = "2" class = "propertyrow cannes hotel">
    <td>some stuff</td>
 </tr>
 <tr id = "3" class = "propertyrow eze villa">
    <td>some stuff</td>
 </tr>
 <tr id = "4" class = "propertyrow london villa">
    <td>some stuff</td>
 </tr>
 <tr id = "5" class = "propertyrow paris hotel">
    <td>some stuff</td>
 </tr>
</table>

Пример ситуации и желаемое поведение

Если я нажму на локации «Канны» и «Эз» (ul.locations) и выберу типы свойств «Вилла» и «Отель» (ul.propertytype), я должен увидеть только tr # 1, tr # 2 и тр # 3.

См. Ниже сценарий, который я использую в настоящее время и с помощью.

//For the location filters
jQuery('.elegant_filters ul li').on('click', function(e){
    jQuery(this).toggleClass('selected');
    var filters = [];
    jQuery('.elegant_filters ul li.selected').each(function(){
        var val = jQuery(this).attr('data-id');
        filters.push('.'+val);          
    });
    console.info(filters);
    if (jQuery(filters).length < 1) {
        jQuery('.elegant_list_properties tr.propertyrow').show();
    } else {
        jQuery('.elegant_list_properties tr.propertyrow').hide();
        jQuery(filters.join(', ')).show();          
    }    
})