11

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

4

5 回答 5

7

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

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

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

一点解释：

  1. $("#nav").children().each() - 为 #nav 元素中的每个元素做正文（对于每个 li, a, div ....

  2. :has(*) - 选择具有任何子元素的元素

  3. :not(:has(*)) - 2 的负数。（选择没有任何子元素的元素） - 最内部
  4. .text() - 这种最内部元素的文本内容

希望，这就够了，我不确定我能否更准确地解释它。:)

于 2013-03-18T20:49:16.870 回答
1

试试这个：

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。它适用于您的所有示例。如果您有相同类型的嵌套元素，它将失败。

演示

先试后买。

于 2013-03-18T20:40:05.217 回答
1

这就是我想出的：

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

于 2013-03-18T20:43:49.527 回答
0

怎么样的东西：

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

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

于 2013-03-18T20:27:43.703 回答
0

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

$('.nav').children(':last-child').text()
于 2013-03-18T20:48:28.890 回答