使用 jQuery 将 class 添加到具有相同 class 的 div 的子元素

Question

I am trying to add a class to the first "img" element of every parent but I cannot manage to do it after several tries. I am trying to add an active class to the first img of every carousel but does not seem to be working.

Below is the jsfiddle link basically I want the first images to show but my jQuery does not work.

https://jsfiddle.net/60mq41nw/

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- second carousel -->
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide2">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

js code:

$(document).ready(function () {
    $('.carousel').each(function() {
      var c = this;
      $(c).find("img").first().addClass("active");
    });
  });

Thanks in advance!

Answer 1

Your code works just fine (It's already append the active class to the first img ).. So i think you want to add the active class to carousel-item because the bootstrap carousel append the active class to the carousel-item not to the img .. try the next code

$(document).ready(function () {
  $('.carousel').each(function() {
    var c = this;
    $(c).find(".carousel-item").removeClass('active').filter(':first').addClass("active");
  });
});

And To be honest I believe there is a built-in method in bootstrap carousel itself to let you achieve this.. I don't know the method because unfortunately I'm not expert in bootstrap