jQuery: показать дочерние элементы с классами, которые соответствуют их родительским классам.

Question

У меня есть списки дочерних элементов, которые должны быть отфильтрованы на основе сопоставления любого из их классов с классами их родителя.

Теоретически родительские и дочерние элементы могут иметь любое количество классов.

По сути, если у ребенка нет класса, который есть у родителя, его необходимо скрыть.

Классы в каждом случае будут неизвестны, поэтому я не могу ориентироваться на какие-либо конкретные имена классов.

Пример моей разметки:

<ul id="mylist" class="class1 class2">
    <li class="class1">This should be visible (class1)</li>
    <li class="class2">This should be visible (class2)</li>
    <li class="class1 class2">This should be visible (class1 class2)</li>
    <li class="class3 class2 class1">This should be visible (class3 class2 class1)</li>
    <li class="class2 class3">This should be visible (class2 class3)</li>
    <li class="class3 class4">This should be hidden (class3 class4)</li>
    <li class="class3">This should be hidden (class3)</li>
    <li class="class4">This should be hidden (class4)</li>
</ul>

Пока я дошел до этого:

$('#mylist li').each(
function(i) {
    var classes = this.className.split(/\s+/);
    for (var i=0,len=classes.length; i<len; i++){
        if (!$('#mylist').hasClass(classes[i])){
            $(this).hide();
        }
    }
});

Что-то не совсем верно в логике. У меня есть правильные результаты, например:

<li class="class1">This is visible</li>
<li class="class2">This is visible</li>
<li class="class1 class2">This is visible</li>

Но не для, например:

<li class="class3 class2">This should be visible</li>

Вот скрипка: http://jsfiddle.net/455qdrn8/

Answer 1

Я думаю, что вы должны сделать, это показать элементы, которые имеют общий класс с родителем так

var $lis = $('#mylist li'),
    classes = $.map($('#mylist').attr('class').split(/\s+/), function (value) {
        return '.' + value
    });

$lis.hide().filter(classes.join()).show();

Демо: скрипка