javascript - JQuery 如果 $(this) 包含 x 并且不包含 y

Question

在 each 循环中，如果当前元素包含 img 而不是其他任何内容，我需要添加一个类。这是我最新的无效代码迭代，它 --- 虽然不正确 --- 可能会给你一个想法。

$(".details").each(function(index){
 $(this).has("img").not(:contains("p, ul, ol, div, span")).addClass('screenshot-only');
});

显然，如果 this 还包含 p, ul, ol, div, span 中的任何一个，我将尝试排除它——所以帮我解决这个问题会很棒.

如果有一种方法可以选择 if this have only img and nothing else all，那会更好。

Answer 1

:contains("p, ul, ol, div, span") 应该放在引号中，因为 Sizzle Engine会将其解析为字符串:

':contains(p, ul, ol, div, span)'

但这很可能不是您的主要问题，:contains 如果您read the jQuery docs搜索文本，而不是 DOM 节点

而是看看 https://api.jquery.com/has-selector/ 或 https://api.jquery.com/has/

一个快速的方法 将它与 https://api.jquery.com/only-child-selector/ 结合使用

$(".details:has(img:only-child)").addClass("screenshot-only");

示例

$(".details:has(img:only-child)").addClass("screenshot-only");

.screenshot-only {background: gold;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="details">
  <img src="//placehold.it/40x40/0bf">
</div>

<div class="details">
  <img src="//placehold.it/40x40/0bf">
  <p>foo</p>
</div>

<div class="details">
  <img src="//placehold.it/40x40/0bf">
</div>

或者如果您更愿意定位此类图片:

$(".details:has(img:only-child)").find("img").addClass("screenshot-only");

.screenshot-only {border: 5px solid gold;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="details">
  <img src="//placehold.it/40x40/0bf">
</div>

<div class="details">
  <img src="//placehold.it/40x40/0bf">
  <p>foo</p>
</div>

<div class="details">
  <img src="//placehold.it/40x40/0bf">
</div>