jQuery：只有直接后代选择器 [英] jQuery: only direct descendant selector

问题描述

我有以下结构：

<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>下的锚点标签（子）但不属于其他标签（孙子）
如果我这样做

I wanna select only the anchors that fall directly under the <li> tags ( children) but not the ones that fall under other tags (grandchildren) if i do

$('ul li> a')

我也会得到ul嵌套在div下面。这样做有干净的方法吗？
谢谢

I will also get the the ul which is nested under the div. is there a "clean" way to do this? thank you

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

ps: I would like to have a generic selector ( this is for a menu pluggin so I want it to ignore all the anchor tags that don't fall directly in the flow of a menu)

推荐答案

最终解决方案

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

The Final Solution

This answer has been completely re-edited to keep it updated. The final solution is basically a selector, where starting from the original <ul> element's ID, select all anchors within the list items that doesn't break the menu structure's flow. That is, if there is an element other than <ul> or <li> nested within, don't select anything within those elements, even if there is a menu within.

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

The resulting selector (#root is the ID of the main <ul>) :

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

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

You can try a demo over here: http://jsfiddle.net/9gPzQ/31/

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

However the original poster @salmane wanted to do it for a plugin, which already comes with an element passed in, so he came up with the following code to do the same as above, but within already selected objects passed as selector context:

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

其他有趣的选择器

在寻找解决方案的过程中，由于我对这个问题的误解，出现了一些有趣的选择器，但我还是会将它们包括在这里仅仅是为了记录，它可能会来对某些人来说很方便。 ：）

Other interesting selectors

Along the way of finding a solution, certain interesting selectors came up due to my misunderstanding of the problem, but I'll include them here anyway just for the record, it might come in handy for some. :)

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

This selector selects the anchors of list items that are on the top level of a menu, wherever they are on the page:

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

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

This selector selects the anchors of list items that are on the top level of a menu, ignoring menus that are nested within other menus, even if they are nested within other containers:

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

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

You can try these to selector in a demo here: http://jsfiddle.net/9gPzQ/4/

这篇关于jQuery：只有直接后代选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！