从未显示的UL中选择LI子项

Question

标题听起来很奇怪，但我想要达到的目标很简单。

在ul s的树中，我想让来自任何li的所有ul个孩子都没有 - 内联 - 样式display: none。所以我发现this post并且我与否定函数:not()混合在一起。结果是：

'ul:not([style*="display: none"]) .k-item'

其中.k-item是我所有li元素的公共类。该选择器在this simple fiddle中有效。问题是它在我的应用程序中不起作用。我有一些控制台命令的屏幕截图，将说明我的场景：

正如您在第二个命令中看到的那样，它会返回一些li元素，这些元素位于ul下，其内联样式中的其他属性中包含display: none。含有li，data-uid和099d值的属性bbca的意外14d2示例。

我不知道我做错了什么，或者是否为此目的存在更好的选择器。

Answer 1

我建议使用jQuery的:visible而不是在样式字符串中查找某些内容，并且样式字符串中的字符串匹配可能会有问题。

$("ul:visible .k-item")

Answer 2

首先获取所有li并检查其父（ul）是否可见。

jsfiddle

$('li', '#layers').each(function(){
    if($(this).parent().is(":visible")){
        alert($(this).text())
    }
});

OR

一个简洁的版本 jsfiddle

$(".k-item:visible").each(function(){
     alert($(this).text())
});

Answer 3

尝试使用

$('ul:not([style*="display: none"]) li.k-item').each(function() { alert($(this).html()) });

HTML

    <ul style="display: none">
       <li class="k-item">1</li>
       <li class="k-item">2</li>
       <li class="k-item">3</li>
    </ul>    
    <ul>
        <li class="k-item">4</li>
        <li class="k-item">5</li>
        <li class="k-item">6</li>
    </ul>  

小提琴：http://jsfiddle.net/3M2ZM/