如何使用jQuery获取div父元素下包含深层嵌套的最后一个子元素？

问题原因 #

你之前的代码不生效是因为 jQuery 的 children() 方法只会匹配当前元素的直接一级子元素，不会递归查找所有嵌套的后代元素，所以多层嵌套的内部元素无法被命中。

解决方案 #

根据你的实际需求可以选择以下两种实现：

方案1：取所有后代中DOM顺序最靠后的元素

如果只要父元素包裹范围内，文档流里排在最后面的元素，不管它本身是否还有子元素，可以直接用find('*')匹配所有后代后取最后一个：

var els = '#first,#second,#third';

$(els).each(function() {
  $(this).find('*').last().addClass('memo');
});

方案2：取最后一级叶子节点（无任何子元素）

如果要求必须是没有嵌套子元素的最后一级节点，可以加一层过滤逻辑：

var els = '#first,#second,#third';

$(els).each(function() {
  $(this).find('*').filter(function() {
    // 过滤出没有子元素节点的叶子元素
    return $(this).children().length === 0;
  }).last().addClass('memo');
});

效果验证 #

修改后你提供的示例中，#third 嵌套层级最内部的 <img> 元素会被正确添加memo类，背景变红，符合预期。

内容的提问来源于stack exchange，提问作者Lekker Cain