如何用jQuery选择无子元素的元素？并提取指定DOM中的‘Image’文本

首先得明确你要的是哪种情况——是完全没有任何内容（包括文本）的元素，还是有文本但没有子元素的元素？这两种情况的选择方式不一样：

• 如果是选完全空的元素（连文本、空格都没有），直接用jQuery的:empty选择器就行，比如：

  // 选中所有没有任何子节点（包括文本、空格）的div
  $('div:empty')
  

  注意哦，:empty对空格、换行这类空白文本节点也会判定为“非空”，所以元素里只要有空白字符就不会被选中。

• 如果是选有文本但没有子元素的元素，就得用filter()方法过滤了，因为:empty不满足这种场景。我们可以检查元素的子元素数量是否为0：

  // 选中所有没有子元素（但可以有文本内容）的div
  $('div').filter(function() {
    return $(this).children().length === 0;
  })
  

  这里的children()只会统计元素节点，文本节点不算在内，刚好符合“没有子元素”的需求。

你遇到的问题是因为jQuery的text()方法会把元素及其所有后代的文本内容合并返回，所以才会得到ImageDescription。要单独拿到‘Image’这个文本，我们可以针对文本节点来操作，给你两种实用的方法：

方法一：过滤文本节点 #

先选中包含目标文本的父<span>，然后用contents()获取它的所有子节点（包括元素节点和文本节点），再过滤出类型为3的节点（也就是文本节点），最后提取文本并去掉多余空格：

$('span').first().contents().filter(function() {
  // nodeType为3代表文本节点
  return this.nodeType === 3;
}).text().trim();

这里$('span').first()是选中最外层的那个<span>（包含<i>和子<span>的那个），避免误选中里面的子<span>。

方法二：克隆后移除子元素 #

另一种更直观的思路是克隆目标元素，然后移除它的所有子元素，剩下的就是我们要的文本内容了：

$('span').first().clone()
  .children().remove() // 移除克隆元素里的所有子元素（<i>和子<span>）
  .end() // 回到克隆的父元素
  .text().trim();

这种方法不需要记节点类型，逻辑更容易理解。

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