jQuery 查找没有指定祖先的元素

【问题标题】：jQuery find elements that do not have specified ancestorjQuery 查找没有指定祖先的元素
【发布时间】：2019-05-03 07:54:42
【问题描述】：

我必须找到一些没有指定祖先的元素。示例代码：

<a href="#">
  <img src="pic1.jpg" />
</a>
<p>
  <img src="pic2.jpg" />
</p>

我想选择所有未包含在a 标记中的img 标记。

我该怎么做？

【问题讨论】：

图片是否被p标签包裹？

标签： jquery html jquery-selectors selector

【解决方案1】：

我用这段代码做到了：

$("img").filter(function(){
  return $(this).closest('a').length === 0
}).css("border", "3px solid red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
  <img src="pic1.jpg" />
</a>
<p>
  <img src="pic2.jpg" />
</p>

【讨论】：

【解决方案2】：

您可以使用更简单的解决方案来完成这项工作。

使用:not() 代替.filter( function )。

$("img:not(a img)").css("border", "3px solid red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
  <img src="pic1.jpg" />
</a>
<p>
  <img src="pic2.jpg" />
</p>

【讨论】：

太棒了！我会用的。

【解决方案3】：

也可以使用父级：

var images =  $('img').filter(function(){
  if(!$(this).parent().is('a')) {
    return $(this);  
  }
});

【讨论】：