Question

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

<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>元素的直接子元素的最后一个元素。

Answer 1

你可以添加一些id，类或数据级对象，以便使嵌套搜索更容易，或者你可以做这个稍微破解版本：

$('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();

等

Answer 2

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

如果您希望最后<span class="B"></span>是根<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");

使用嵌套的重复元素结构限制JQuery选择的范围

2 个答案: