jquery - 如何使用 jquery 操作 html 列表

Question

我有 html 中未排序的列表。一些li有一个class="checked"。如果 li 元素具有 class='checked' 它应该隐藏 li 元素内的跨度。

我的例子:

$('ul li').each(function(){
    if($(this).attr('class') == 'checked'){
        $('li span').hide();
    }
});

<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

但是我的代码隐藏了每个列表元素。为什么会这样？

Answer 1

这样做会更有效:

$('ul li.checked span').hide();

另外，考虑使用纯 CSS:

ul li.checked span {
    display: none;
}