Question

嗨，这是我的问题：

<ul>
   <li><span class="show">*</span>Show</li>
   <li><span class="show">*</span>Show</li>
   <li><span class="show">*</span>Show</li>
   <li><span class="show">*</span>Show</li>
   <li>Hide</li>
   <li>Hide</li>
</ul>

这个http://jsfiddle.net/ajitam/GqCpW/

的对立面

如何在没有span.show的情况下选择（使用jQuery）'li'。

谢谢

Answer 1

选择器应如下所示：

$('ul li:not(:has(span.show))')

示例：http://jsfiddle.net/Mkj7Z/

由于这样的选择器非常昂贵，因此请确保将生成的DOM节点缓存在变量中以便进一步访问。

Answer 2

尝试隐藏所有内容，然后展示具有span.show

的内容

$('ul li').hide().find('span.show').parent().show();

Answer 3

jAndy的解决方案，$('ul li:not(:has(span.show))')效果很好，但:not和:has通常是表现不佳的选择器（他指出它们很贵）。查看您的标记，是否可以根据文本选择<li>元素？

// Using `:contains` we can look for *Hide*
$('ul > li:contains("Hide")')

// Or using `filter()` for an exact match
$('ul > li').filter(function () {
    return $.text(this) === "Hide";
});

这个更快，更整洁。

Answer 4

使用：

$('ul li').filter(function(){
     return $('.show',this).length==0;
});

您可以将过滤器扩展为更复杂的查询。

选择没有特定元素的元素

4 个答案: