Jquery adding class if another class has this class in loop

Question

$(document).ready(function() {
  if ($("#grid .media-box").hasClass("brand1")) {
    $("#grid .media-box-content").addClass("brand01")
  };
}
});

and in body looping div grid

<div id="grid">
  <?php foreach($data as $items) { ?>
  <div class="media-box video <?php  echo $items->brand; ?> <?php  echo $items->country; ?>">
    <div class="media-box-image">
      <div data-width="240" data-height="168" data-thumbnail="gallery/thumbnails/thumb-2.jpg"></div>
      <div data-type="iframe" data-popup="https://www.youtube.com/watch?v=5guMumPFBag" title="Psico dell consecteture"></div>
      <div class="thumbnail-overlay">
        <i class="fa fa-video-camera mb-open-popup"></i>
        <a href="#"><i class="fa fa-link"></i></a>
      </div>
    </div>
    <div class="media-box-content">
      <div class="media-box-title">Psico dell consecteture</div>
      <div class="media-box-date">
        <?php echo $items->country; ?></div>
      <div class="media-box-text">Lorem ipsum dolor sitam psico.</div>
      <div class="media-box-more"> <a href="#">Read more</a> 
      </div>
    </div>
  </div>
  <?php } ?>
</div>

CSS:

.media-box {
  font-size: 13px;
}
.brand01 {
  background: blue !important;
}
.media-box-content {
  padding: 20px;
  position: relative;
  color: rgb(51, 51, 51);
  line-height: 17px;
}

The above code is not working for me.

 <?php  echo $items->brand; ?> <?php  echo $items->country; ?>" >

is fetching 2 classes to the dive from database.

void · Accepted Answer · 2015-12-18 07:11:24Z

1

$("#grid .media-box.brand1").find(".media-box-content").addClass("brand01")

Your code will add class brand01 to all .media-box-content if the condition is true.

answered Dec 18, 2015 at 7:11

void

36.8k10 gold badges72 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2015-12-18 07:29:54Z

0

There is no need to use if condition, you can use .toggleClass() with second arg as function which returns a boolean value as true/false:

$(document).ready(function() {
    $("#grid .media-box-content").toggleClass("brand01", function(){
       return $(this).closest(".media-box").hasClass("brand1");
    });
});

I feel you need to target the each .media-box-content and find the parent .media-box has the class, if has true then add it if false remove it.

answered Dec 18, 2015 at 7:29

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Gaurav Rai · Accepted Answer · 2015-12-18 07:31:44Z

0

Use this, it will work

$(document).ready(function() {
    $("#grid .media-box").each(function(index, element) {
        if ($(this).hasClass("brand1")) {
            $(this).children(".media-box-content").addClass("brand01")
          }
    });

});

answered Dec 18, 2015 at 7:31

Gaurav Rai

92810 silver badges23 bronze badges

Collectives™ on Stack Overflow

Jquery adding class if another class has this class in loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related