html - 将 附加到所有具有 x 类的 ，除了

Question

我想在所有具有“image”类的 div 上插入一个新的 div，但有一些异常(exception)。

$("<div>— hold to read</div>").appendTo('.image')

在这些之间我还有一些分隔符图像，也带有 .image 类(由 Wordpress 自动添加)，但不应该有 <div>里面。

除了这个异常(exception)，我该如何编写上面的内容？我可以根据内部带有标题的链接来定位需要的内容，例如 ('.image > a[title="divider-picture"]')

这应该有

<div class="image">

<a itemprop="image" title="main-picture" data-rel="prettyPhoto[single_pretty_photo]" href="#">

<img itemprop="image" src="#" alt="main">

</a>

<div class="img__label_layer">— hold to read</div>
<span class="holdtoview"><div class="actionin">TEXT</div></span>

</div>

这不应该

<div class="image">

<a itemprop="image" title="divider-picture" data-rel="prettyPhoto[single_pretty_photo]" href="#">

<img itemprop="image" src="#" alt="div">

</a>

<div class="img__label_layer">— hold to read</div>
<span class="holdtoview"><div class="actionin">TEXT</div></span>

</div>

谢谢

Answer 1

你可以这样做:使用 not()和has()选择全部<div>具有类 image 的元素没有 child <a>具有属性 `title="divider-picture"

$("<div>— hold to read</div>").appendTo('div.image:not(:has( a[title="divider-picture"]))');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">

<a itemprop="image" title="main-picture" data-rel="prettyPhoto[single_pretty_photo]" href="#">

<img itemprop="image" src="#" alt="main">

</a>

<div class="img__label_layer">— hold to read</div>
<span class="holdtoview"><div class="actionin">TEXT</div></span>

</div>
<div class="image">

  <a itemprop="image" title="divider-picture" data-rel="prettyPhoto[single_pretty_photo]" href="#">

    <img itemprop="image" src="#" alt="div8">

  </a>

  <div class="img__label_layer">— hold to read</div>
  <span class="holdtoview">
    <div class="actionin">TEXT</div>
  </span>

</div>

`: