Question

我有大约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找到这些最终的孩子？

Answer 1

使用单个语句/选择器的最简单方法：

$("#nav").children().each(function(i, item) {
    alert($(item).find(':not(:has(*))').text());
});

JSFiddle：http://jsfiddle.net/qUx4A/

一点解释：

$（“＃nav”）。children（）。each（） - 为#nav元素中的每个元素执行正文（对于每个li，a，div ....
< / LI>
：has（*） - select元素，具有任何子元素
：not（：has（*）） - 2.的负数（选择没有任何子元素的元素） - 大多数内部
.text（） - 这种最内在元素的文本内容

希望，这是应该的，我不确定我能更准确地解释它。：）

Answer 2

试试这个：

var container = $('#nav');
var children = container.children();
var element = children.eq(0);
while(children.length) {
    children = children.children();
    if (children.length)
        element = children.eq(0);
}
var elements = container.find(element.get(0).tagName);

它将最深的孩子存储在element中，然后根据找到的tagName选择所有这些孩子。它适用于所有示例。如果你有一个相同类型的嵌套元素，它就会失败。

<强>演示

Try before buy

Answer 3

这就是我提出的：

$('.nav').each(function(){
    console.log('Nav '+$(this).index());
    $(this).children().each(function(){
        var $d = $(this);
        while($d.children().length==1){
            $d = $($d.children()[0]);
        }
        console.log($d.text());
        console.log($d);
        console.log('');
    });
});

http://jsfiddle.net/ymjaG/

Answer 4

如下：

$("#nav").children(":last-child").text();

http://jsfiddle.net/RyanWalters/uhN94/

Answer 5

ID 必须才是唯一的。将其更改为班级并执行以下操作：

$('.nav').children(':last-child').text()

如何使用jquery获取最后一个通用子节点？

5 个答案: