jQuery:只有直接后代选择器

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是主要的ID <ul>):

$('#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/