Добавьте класс к дочерним элементам div с тем же классом, используя jQuery

Question

Я пытаюсь добавить класс к первому элементу "img" каждого родителя, но мне не удается это сделать после нескольких попыток. Я пытаюсь добавить активный класс к первому img каждой карусели, но, похоже, не работает.

Ниже приведена ссылка на jsfiddle, в основном я хочу показать первые изображения, но мой jQuery не работает.

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 код:

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

Заранее спасибо!

Answer 1

Ваш код работает просто отлично (он уже добавляет активный класс к первому img). Поэтому я думаю, что вы хотите добавить активный класс к carousel-item, потому что карусель bootstrap добавляет активный класс к carousel-item не до img .. попробуйте следующий код

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

И если честно, я считаю, что в самой карусели bootstrap есть встроенный метод, позволяющий вам достичь этого .. Я не знаю метод, потому что, к сожалению, я не эксперт в bootstrap