Append <div> to all <div>s with class x, except

user_12021750 0
Viewed 52

I want to insert a new div on all div s with class 'image', but with some exceptions.

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

Between these I also have some divider images, also with .image class (added by Wordpress automatically), but which shouldn't have that <div> inside.

How can I write the above but with this exception? I can target the ones that need out based on a link with a title inside eg ('.image > a[title="divider-picture"]')

THIS SHOULD HAVE

<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>

THIS SHOULDN'T

<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>

Thanks

html jquery
3 Answers

You could do it like this: use not() and has() to select all <div> elements that have the class image that don't have a child <a> with the attribute `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>

`:

user_39431250

Use the :not() selector or the .not() method.

$(function() {
  $('<div>Inserted</div>').appendTo('.image:not(.skip)')
})
.image {
  border: 1px solid red;
  padding: 5px;
  margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">Image</div>
<div class="image">Image</div>
<div class="image skip">Image</div>
<div class="image">Image</div>

Also, it may be you want to omit ones that have a specific child. Here's one way.

$(function() {
    $('<div class="insert">Inserted</div>').appendTo(
    $('.image').not($('.image:has(.skip)'))
  )
})
.image {
  border: 1px solid red;
  padding: 5px;
  margin: 5px;
}
.insert {
  border: 1px solid blue;
  padding: 5px;
  margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">Image</div>
<div class="image">Image</div>
<div class="image">
  <span class="skip">Skip</span>
  Image
</div>
<div class="image">Image</div>

user_4519690

You can use .not() with .has() to achieve this in jQuery:

var el = $("<div>— hold to read</div>");
$('.image').not().has('[title="divider-picture"]').prepend(el)
<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>

<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>
<span class="holdtoview"><div class="actionin">TEXT</div></span>

</div>

user_8963580
Related