如何使用jQuery选择树中的最后一个孩子？

Posted 2023-05-09

【中文标题】如何使用jQuery选择树中的最后一个孩子？

【英文标题】：How to select the last child inside the tree using jQuery?

【发布时间】：2019-10-01 10:50:41

【问题描述】：

假设我有这样的结构：

<div id="content">
    <div>
        <span>
            <b>
                <i>
                    <u>
                        <span>Price</span>
                    </u>
                </i>
            </b>
        </span>
    </div>
</div>

在这种情况下，div #content 内的标签数量以及他们不认识我的标签数量。我只能访问 id content。

如何让选择器找到包含文本 Price 的最新跨度？

附言lastChild 方法返回所选选择器中的最后一个子节点，但不会更深！

【参考方案1】：

使用*选择器选择#content的所有子元素，并使用.filter()过滤元素。在回调过滤元素中没有任何子元素。

$("#content *").filter(function()
  return $("*", this).length == 0;
);
// Or using ES6
$("#content *").filter((i,v) => $("*", v).length == 0);

var ele = $("#content *").filter((i,v) => $("*", v).length == 0);
console.log(ele[0].outerhtml);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div>
        <span>
            <b>
                <i>
                    <u>
                        <span>Price</span>
                    </u>
                </i>
            </b>
        </span>
    </div>
</div>

【参考方案2】：

您可以使用.find()： https://api.jquery.com/find/

这将递归查找您的选择器，因此： $('#content').find('span') 将为您提供两个跨度，一个用于第一个嵌套跨度，一个用于第二个嵌套跨度。不利的一面是，如果您有多个跨度，则需要找到正确的跨度。

如果您可以在最后一个标识符中添加一个标识符，比如一个名为“target-class”的类，那么您就会知道您会找到正确的标识符： $('#content').find('span.target-class');

【讨论】：

以Span为例，可能有完全不同的标签。

【参考方案3】：

首先让我们修正你的语法。您不能将<span> 直接放在<u> 中。您需要一个 <li> 节点。此外，您不能/不应该将块元素（例如 ul）放入内联元素（span、a、b、i...）中。甚至不推荐使用<b> 和<i>，最好使用<strong> 或<em> 等语义标记。

现在你的问题。我认为您不必关心成为最后一个节点。如果您知道包含的文本是“价格”，则可以通过以下方式查找：

var selector = $('#content').find(":contains('Price')");
$(selector).addClass('highlighted');

.highlighted 
background-color: red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div>
        <u>
          <li>
              <span>Price</span>
          </li>
        </u>
    </div>
</div>

如果此解决方案不符合您的需求，要获取最后一个节点，您必须检查所有节点是否有子节点。一旦他们不这样做，你就达到了你的目标。 但我不得不说这是你可以在 SO 中找到的解决方案。 Select deepest child in jQuery

【讨论】：

1.我随意输入的标签例如2。我不知道标签里面的文字，它可以是任何。我的任务是替换文本并将整个标签链保存在某处。

很好，但是认为我们将使用您的代码来解决您的问题。语法错误会导致代码中断。您应该注意语法以节省我们修复它的时间。就这样。希望你能理解。

2.所以我给了你两个答案。

是的，谢谢评论，我下次会考虑语法错误。

【参考方案4】：

Jquery 方式- 您可以使用$() 定位所有跨度并使用slice() 方法定位最新的跨度。

$('#content span').slice(-1)[0];

Javascript 方式 - 使用querySelectorAll() 查找所有跨度，你会得到一个NodeArray，你可以使用Array.from() 和slice() 将其转换为数组，其中最后一项是最新的跨度。

Array.from(document.querySelectorAll('#content span')).slice(-1)[0]

【讨论】：

不知道最后一个标签会是span