我有大约4000个网站,导航html有所不同,但是最终的子节点总是一个基于文本的节点,而且html是如何布局的.
基于以下html示例,我将如何获取每个li或a或div的最后一个子节点
<!-- want to be able to get each span and its text --> <ul id="nav"> <li><a href="#"><span>Menu Item</span></a></li> <li><a href="#"><span>Menu Item</span></a></li> <li><a href="#"><span>Menu Item</span></a></li> </ul> <!-- want to be able to get each a and its text --> <ul id="nav"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <!-- want to be able to get each a and its text --> <div id="nav"> <div><a href="#">Menu Item</a></div> <div><a href="#">Menu Item</a></div> <div><a href="#">Menu Item</a></div> </div> <!-- want to be able to get each a and its text --> <div id="nav"> <a href="#">Menu Item</a> <a href="#">Menu Item</a> <a href="#">Menu Item</a> </div>
这些只是导航在一些网站中实现的一些方法,通常都有一个根元素,其中的id为nav,后面是一组可以具有孙子和更深的孩子.
我不想为每个人写一个单独的选择器,所以我试图找到一个通用的方式来对#nav中的第一个孩子进行每个操作,然后找到包含一些文本的特定元素的最后一个孩子.
到目前为止,我只能设法编写任何需要每种导航类型的自定义选择器的东西,所以我怕我没有任何代码开始发布.
有没有人有任何想法他们如何找到这些最终的孩子与jquery？
解决方法
单一语句/选择器最简单的方法：
$("#nav").children().each(function(i,item) {
alert($(item).find(':not(:has(*))').text());
});
JSFiddle：http://jsfiddle.net/qUx4A/
一点解释：
> $(“#nav”).children().each() – 为#nav元素中的每个元素(对于每个li,a,div ….)
>：has(*) – select element,that have any child element
>：not(：has(*)) – 负的2.(选择没有任何子元素的元素) – 最内在的
> .text() – 这样最内在元素的文本内容
希望,这不够,我不知道我可以更准确地解释它.
