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

【问题标题】：Select LI children from a not none-displayed UL从非未显示的 UL 中选择 LI 子项
【发布时间】：2014-01-29 19:11:42
【问题描述】：

标题听起来很奇怪，但我想要实现的很简单。

在uls 的树中，我想从没有-内联样式display: none 的任何ul 中获取所有li 子级。所以我找到了this post，并与否定函数:not()混合。结果是：

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

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

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

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

【问题讨论】：

标签： javascript jquery css jquery-selectors css-selectors

【解决方案1】：

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

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

【讨论】：

无变化，结果相同。
@DontVoteMeDown - 我修复了我的答案中缺少的一些引号。在这个 jsFiddle 中它对我来说很好用：jsfiddle.net/jfriend00/Cxf74。也许你可以提供一个演示，它不起作用。
是的，很奇怪。它也适用于我的小提琴测试。我将尝试在 fiddle 上重现一个更准确的示例。
@DontVoteMeDown - display: none 是否有可能在您的 javascript 运行后被添加到您的 <ul> 标签中，因此当代码运行时它们不存在？
屏幕截图上的命令在应用程序执行之前的断点上运行。所以它在正确的背景和正确的时间，并且有风格。太奇怪了。

【解决方案2】：

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

jsfiddle

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

或

一个简洁的版本 jsfiddle

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

【讨论】：

很好，我稍后再试试。但我更喜欢在主循环选择器上，因为我需要循环提供的index 忠于匹配计数。这很有趣，因为我可以试试find('ul'):is(':visible').find('.k-item')。它的丑陋但何关心.. 哈哈谢谢你。
谢谢老兄，但我找到了ul:visible > .k-item 的解决方案。还是谢谢你。

【解决方案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/

【讨论】：

首先，"k-item" 根本不在<ul> 标签上。请看图中OP的实际文档结构。
@jfriend00 类更正使用“k-item”而不是“kitem”，同样的想法。
您没有解决 OP 所询问的问题。他们试图选择带有 k-item 类的 li 标签，而不是 UL 标签。
@jfriend00，将我的答案更改为“从未显示的 UL 中选择 LI 孩子”
看起来就像 OP 最初的样子，所以我不确定你改变了什么。