Question

我有以下结构：

<ul>
    <li><a>link</a>
        <ul>
            <li>
                <a>link</a>
                <ul>
                    <li><a>link</a></li>
                    <li><a>link</a></li>
                    <li><a>link</a></li>
                </ul>
            </li>
             <li>
                <a>link</a>
                 <ul>
                    <li><a>link</a></li>
                    <li><a>link</a></li>
                    <li><a>link</a></li>
                 </ul>
             </li>
        </ul>
    </li>
    <li>
        <div>content 
            <ul>
                <li><a>link</a></li>
                <li><a>link</a></li>
                <li><a>link</a></li>
            </ul>
         </div>
    </li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
</ul>

我想只选择直接落在<li>标签（儿童）下的锚点，而不是那些属于其他标签（孙子）的锚点如果我做了

$('ul li> a')

我也将获得嵌套在div下面的ul。这样做有“干净”的方法吗？谢谢

ps：我想有一个通用选择器（这是一个菜单插件，所以我希望它忽略所有不直接落在菜单流中的锚标签）

Answer 1

最终解决方案

此答案已完全重新编辑以保持更新。最终解决方案基本上是一个选择器，从原始<ul>元素的ID开始，选择列表项中不会破坏菜单结构流的所有锚点。也就是说，如果嵌套了<ul>或<li>以外的元素，请不要在这些元素中选择任何内容，即使其中有菜单。

结果选择器（#root是主<ul>的ID）：

$('#root > li > a, #root ul:not(#root :not(ul,li) ul) > li > a')

您可以在此处尝试演示：http://jsfiddle.net/9gPzQ/31/

然而原始海报 @salmane 想要为插件做这件事，插件已经传入了一个元素，所以他提出了以下代码来执行与上面相同的操作，但是已选择的对象作为选择器上下文传递：

$('li >a',this.content).not($(':not(ul,li) a',this.content))

其他有趣的选择器

在寻找解决方案的过程中，由于我对这个问题的误解，出现了一些有趣的选择器，但是我将它们包括在这里只是为了记录，它可能会派上用场。：）

此选择器选择位于菜单顶层的列表项的锚点，无论它们在页面上的哪个位置：

$(':not(li) > ul > li > a')

此选择器选择位于菜单顶层的列表项的锚点，忽略嵌套在其他菜单中的菜单，即使它们嵌套在其他容器中：

$('ul:not(ul ul) > li > a')

您可以在此处的演示中尝试使用这些选择器：http://jsfiddle.net/9gPzQ/4/

Answer 2

我认为您正在寻找的是：

$('ul:parent ul li>a')

这将为您提供所有li>a，而不包含div或其中任何内容。

Answer 3

感谢@DarthJDG的精彩输入

这是解决方案

$('li >a',this.content).not($(':not(ul,li) a',this.content))

this.content是插件引用的对象，在这种情况下，对象是父UL

我希望这有助于某人

jQuery：只有直接后代选择器

3 个答案:

最终解决方案

其他有趣的选择器