我有以下结构:
<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.有没有一个“干净”的方式来做到这一点?
谢谢
解决方法
最终的解决方案
这个答案已经完全重新编辑,以保持更新.最终解决方案基本上是一个选择器,从原始的< 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))
其他有趣的选择器
在寻找解决方案的同时,由于我对这个问题的误解,某些有趣的选择器出现了,但是我将把它们包括在内,只是为了记录,这可能会对某些人有所帮助.