Question

我有以下div，其中包含一个标签（类别）的选择列表，这些标签在被选中时会过滤（隐藏）任何包含所选单词的li。效果很好，但是我实际上希望它隐藏父级。

例如，如果选择了Neurology，我希望Heading 2及其上级ul与Neurology一起可见。如果选择了“糖尿病”，我希望父母ul被完全隐藏。

任何人都可以帮忙吗？

HTML

<div id="container">
    <select id="tags">
       <option>Cancer</option>
       <option>Diabetes</option>
       <option>Obesity</option>
    </select>

    <ul class="itemdetails">
       <li class="heading">Heading 1</li>
       <li><a href><span class="tagdetails">Diabetes</span></a></li>
    </ul>
    <ul class="itemdetails">
       <li class="heading">Heading 2</li>
       <li><a href><span class="tagdetails">Obesity</span></a></li>
       <li><a href><span class="tagdetails">Neurology</span></a></li>
    </ul>
</div>

jQuery

var itemlist = $('#container');
$('#tags').change( function () {
    var tagsfilter = $(this).val();
    if (tagsfilter) {
        $matches = $(itemlist).find('span.tagdetails:Contains(' + tagsfilter + ')').parent();
         $('a', itemlist).not($matches).hide();
        $matches.show();
    } else {
        $(itemlist).find("a").show();
    }
    return false;
})

Answer 1

更新的代码。

1）$('.tagdetails:not(:contains("'+tagsfilter +'"))').closest('li').hide();

首先，我们选择并隐藏所有li元素，这些元素不包含所选选项的值文本。

2）$('.itemdetails:not(:has(li:visible>a>span))').not('.heading').hide();

接下来，我们选择所有带有类itemdetails的ul元素，这些元素具有可见的li子元素，而子元素又具有后代a和span并且没有标题类并隐藏它。

$('#tags').change( function () {

    $('.itemdetails').show();
    $('.tagdetails').closest('li').show();
    
    var tagsfilter = $(this).val();  
    if($('.tagdetails:contains("'+tagsfilter+'")').length > 0){
       $('.tagdetails:not(:contains("'+tagsfilter +'"))').closest('li').hide();
       $('.itemdetails:not(:has(li:visible>a>span))').not('.heading').hide();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <select id="tags">
        <option>Cancer</option>
        <option>Diabetes</option>
        <option>Obesity</option>
        <option>Others</option>
    </select>

    <ul class="itemdetails">
        <li class="heading">Heading 1</li>
        <li><a href><span class="tagdetails">Diabetes</span></a></li>
    </ul>
    <ul class="itemdetails">
        <li class="heading">Heading 2</li>
        <li><a href><span class="tagdetails">Obesity</span></a></li>
        <li><a href><span class="tagdetails">Neurology</span></a></li>
    </ul>
    <ul class="itemdetails">
        <li class="heading">Heading 3</li>
        <li><a href><span class="tagdetails">Diabetes</span></a></li>
        <li><a href><span class="tagdetails">Others</span></a></li>
    </ul>
</div>

jQuery隐藏父ul

1 个答案: