0

给定一个重复的嵌套元素结构，例如：

<div class="A">

  <span class="B></span>
  <span class="B></span>

  <span class="B">
     <div class="A">
        <span class="B"></span>
     </div class="A">
  </span>

</div>

如何选择<span class="B"></span>作为根<div class="A"></div>元素的直接子元素的最后一个？

我累了：

div.A > class.B

...但是（正确地）这也匹配不是根元素的直接子元素的最后一个<div class="A"></div>元素。

4

2 回答 2

1

您可以添加一些 id、类或数据级对象以使嵌套搜索更容易，或者您可以执行这个稍微有点 hackish 的版本：

$('div.A').first().children('span.B').last();

不过，我建议添加一个数据级别、id 或其他类来处理该级别。

例如，将您的 HTML 更改为：

<div class="A" data-level="first">

  <span class="B" data-level="second"></span>
  <span class="B" data-level="second"></span>

  <span class="B" data-level="second">
     <div class="A" data-level="third">
        <span class="B" data-level="fourth"></span>
     </div>
  </span>

</div>

您可以执行以下操作：

$('span.B[data-level="second"]').last();

等等

于 2012-04-12T19:54:59.287 回答
0

jQuery 有:last选择器。我仍然不完全清楚您要选择哪个对象。

如果你想要最后<span class="B"></span>一个是 root 的直接子级<div class="A">，那么你有以下选项：

1）给根一个标识类：

<div class="A root">

  <span class="B></span>
  <span class="B></span>

  <span class="B">
     <div class="A">
        <span class="B"></span>
     </div>
  </span>

</div>

而这个选择器：

A.root > .B:last

2）指定根对象的父对象来识别它：

body > .A > .B:last

3）使用一些代码来识别根对象：

$(".A").filter(function() {
    // filter out items that have an "A" class as a parent
    return($(this).parents(".A").length == 0);  
}).children(".B:last");
于 2012-04-12T20:01:31.433 回答