Remove Class from a parent div based on the child element class

Question

Remove Class from a parent div based on the child element class

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm using LazySizes to upload images progressively. link

This is the style of my project

<div class="image-wrap"> <img class="lazyload" src=""> </div>

When the images are loading, the IMG tag gains a new lazyloading class and when it finishes loading, it is replaced by the lazyloaded

What I would like to do is to place or remove a class in DIV.image-wrap , based on the .lazyloading class of the IMG element.

<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/sports/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/nature/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/cats/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/business/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/city/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
   </a>
</div>

</div>

javascript jquery

asked by anonymous 02.03.2018 / 22:31

2 answers

0

Try doing this using JQuery :

$('.lazyload').parent().removeClass('image-wrap')

02.03.2018 / 23:24

Sort firebase list ORACLE SQL - Sort by sum

score 1 · Accepted Answer

You can put first class on all elements with .image-wrap on page load, and use on load to detect when the image loads. I've also added on error to apply the same effect if image loading fails ( on error is optional, can be removed if desired).

In the example below I put the first class with a red background, and the second with a blue background:

$(document).ready(function(){
   $(".image-wrap").addClass("classe1");

   const els = $(".image-wrap").find("img");
   
   els.each(function(){
      $(this).on("load error", function(){
         $(this)
         .closest(".image-wrap")
         .addClass("classe2")
         .removeClass("classe1");
      });
   });
});

/*linhas só para exemplo*/

.classe1{
   background: red;
}

.classe2{
   background: blue;
}

.image-wrap{
   padding: 15px;
   margin: 5px;
   position:relative;
}
.classe1:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    content: "";
    background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/sports/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/nature/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/cats/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/business/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/city/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/people/"></a></div></div>

Edit

Youcanalsousepluginevents,lazybeforeunveilandlazyloaded,buttheydonotdetectwhenimageloadingfails:

$(document).on('lazybeforeunveil lazyloaded', function(e){

  if(e.type == 'lazyloaded'){
    var addClass = 'classe2',
    removeClass = 'classe1';
  }else{
    var addClass = 'classe1',
    removeClass = 'classe2';
  }
  
  $(e.target)
  .closest('.image-wrap')
  .addClass(addClass)
  .removeClass(removeClass);
});

/*linhas só para exemplo*/

.classe1{
   background: red;
}

.classe2{
   background: blue;
}

.image-wrap{
   padding: 15px;
   margin: 5px;
   position:relative;
}
.classe1:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    content: "";
    background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/sports/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/nature/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/cats/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/business/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/city/"></a></div><divclass="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
   </a>
</div>

</div>