JQuery Not选择器未按预期工作，筛选非img元素失败求助

你遇到的问题核心在于jQuery解析HTML字符串后返回的是顶级元素集合，而.not('img')只会过滤这个顶级集合里的元素，不会处理子元素中的img。

为什么原代码没生效？ #

当你执行$(HTMLString)时，jQuery把你的字符串解析成了两个顶级DOM元素：<figure>和<p>。.not('img')会检查这个集合里的每个元素是否是img——显然这两个都不是，所以过滤后的集合和原集合完全一样。

而你调用.html()时，它只会返回集合中第一个元素的内部HTML，也就是<figure>里的<img>标签，这就造成了“结果只有img”的错觉；当你把这个集合替换到body里时，<figure>（带着img）和<p>都会被插入，所以img依然存在。

解决方案 #

根据你的需求，分两种情况处理：

1. 移除所有img元素（包括子元素里的）

如果你想保留原有的顶级元素，但移除其中所有的img标签，可以用.find('img').remove().end()：

var HTMLString='<figure class="tmblr-full"><img src="http://placekitten.com/g/200/300"></figure><p>This is NOT the cat we are looking for! </p>';
var jqueryObjectFromHTMLString=$(HTMLString);
// 找到所有img并移除，然后回到原元素集合
var jqueryObjectMinusImages=jqueryObjectFromHTMLString.find('img').remove().end();

// 正确输出所有元素的HTML（不再只取第一个元素的innerHTML）
console.log(jqueryObjectMinusImages.map(function(){
  return this.outerHTML;
}).get().join(''));

$('body').replaceWith(jqueryObjectMinusImages);

• .find('img')：遍历所有子元素，找到所有img标签
• .remove()：删除这些img标签
• .end()：回到之前的顶级元素集合（此时figure里已经没有img了）

2. 只保留完全不包含img的元素

如果你想直接过滤掉所有包含img的顶级元素（比如移除整个figure），只保留没有img的元素（比如p），可以用.filter()：

var HTMLString='<figure class="tmblr-full"><img src="http://placekitten.com/g/200/300"></figure><p>This is NOT the cat we are looking for! </p>';
var jqueryObjectFromHTMLString=$(HTMLString);
// 过滤掉本身是img，或者包含img的元素
var jqueryObjectMinusImages=jqueryObjectFromHTMLString.filter(function(){
  return !$(this).is('img') && $(this).find('img').length === 0;
});

console.log(jqueryObjectMinusImages.html()); // 现在输出p的内容
$('body').replaceWith(jqueryObjectMinusImages);

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