jQuery 隐藏了所有 <li> 标签

Posted 2023-03-10

【中文标题】jQuery 隐藏了所有 <li> 标签

【英文标题】：jQuery is hiding all <li> tags

【发布时间】：2015-02-27 19:43:22

【问题描述】：

遇到一些 jQuery 问题，因为我对它还很陌生，我有一些 jQuery 代码隐藏了 <li> 项目的过滤器菜单。但是，当我使用它时，它还会隐藏我在主菜单标题中使用的<li> 标签。

我正在考虑为 <li> 分配一个特定的类名以隐藏，但他们已经在使用特定的名称。 （如会计、快递等）

如何仅隐藏特定的<li> 标签而不隐藏主菜单标题中的标签？ 我可以为要隐藏的<li>s 分配不同的标识符吗？

要隐藏的 li 的 HTML 代码：

<div class="tags">
<div id="col">
    <label>
        <input type="checkbox" rel="accounting" />Accounting</label>
</div>
<div id="col">
    <label>
        <input type="checkbox" rel="courier" />Courier</label>
</div>
<div id="col">
    <label>
        <input type="checkbox" rel="project-management" />Project Management</label>
</div>
<div id="col">
    <label>
        <input type="checkbox" rel="video-games" />Video Games</label>
</div>
</div>

<ul class="results">
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a>

</li>
<li class="courier" style="list-style-type:none"><a href=" path('job1') " style="text-decoration: none">Courier / Parcel Delivery</a>

</li>
<li class="project-management" style="list-style-type:none"><a href=" path('job3') " style="text-decoration: none">Game QA Project Management</a>

</li>
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a>

</li>
</ul>

jQuery 代码（隐藏所有 li 标签）

<script>
    $('div.tags').find('input:checkbox').on('click', function () 
        var vals = $('input:checkbox:checked').map(function () 
            return $(this).attr('rel');
        ).get();
        $('li').hide().filter(function () 
            return ($.inArray($(this).attr('class'), vals) > -1)
        ).show()
        if ($('input:checkbox:checked').length == 0) $('li').show()
    );
</script>

【参考方案1】：

尝试将选择器改进得更具体，如下所示：

<script>
    $('div.tags').find('input:checkbox').on('click', function () 
        var vals = $('input:checkbox:checked').map(function () 
            return $(this).attr('rel');
        ).get();
        $('.results li').hide().filter(function () 
            return ($.inArray($(this).attr('class'), vals) > -1)
        ).show()
        if ($('input:checkbox:checked').length == 0) $('.results li').show()
    );
</script>

从$('li') 到$('.results li') 的更改将导致它只选择ul 中具有results 类的列表元素。

【讨论】：

完美！谢谢楼主！

没问题，很高兴能帮上忙！

【参考方案2】：

您只需将jquery 选择器li 替换为您的container-class li，就像这样

.results li

LIVE DEMO