jQuery：显示 child 个具有 class/es 且与其 parent class/es 相匹配的元素

Question

我有 child 个元素的列表，需要根据 class 中的任何一个与其 parent 的匹配来过滤这些元素。

parent 和 children 元素理论上可以有任意数量的 classes。

本质上，如果 child 没有 parent 也有的 class，则需要隐藏它。

每种情况下的 classes 都是未知的，因此我无法定位任何特定的 class 名称。

我的标记示例：

<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>

这是一个fiddle：http://jsfiddle.net/455qdrn8/

Answer 1

我认为你应该做的是显示与父级有共同 class 的元素，所以

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

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

演示：Fiddle

jQuery：显示 child 个具有 class/es 且与其 parent class/es 相匹配的元素

jQuery: show child elements with class/es that match their parent class/es

jquery

classname