javascript - 如何使用 jQuery 选择树中的最后一个 child ？

Question

假设我有这样一个结构:

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

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

如何让选择器转到包含文本 Price 的最新范围？

附注lastChild 方法返回所选选择器中的最后一个子项，但不会更深!

Answer 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>