如何使用 jQuery select 树中的最后一个 child？

Question

假设我有这样一个结构：

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

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

如何将选择器获取到包含文本 Price 的最新范围？

p.s。 lastChild 方法 returns 所选选择器中的最后一个 child，但不能更深！

Answer 1

Select #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>

Answer 2

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

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

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

Answer 3

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

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

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>

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

Answer 4

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

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

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

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

如何使用 jQuery select 树中的最后一个 child？

How to select the last child inside the tree using jQuery?

html

javascript

jquery

jquery-selectors