添加 css class 到页面上所有轮播的所有第一个轮播项目

Question

我想使用 Bootstrap 4 中的轮播来显示动态内容。轮播的第一项需要 css class “.active”。实际上，这应该直接添加到 HTML 中，但这对我的动态内容输出有点棘手。因此我想通过 JavaScript 添加它，我发现了这个主题：Appending a class to the first div of a set of dynamically created divs

解决方法是在结束的 body-tag 前添加如下 JavaScript:

$(".carousel-item:first").addClass('active');

到目前为止，这是可行的，但前提是您的网页上有一个轮播。如果超过，这仅适用于代码中的第一个轮播。

我现在所做的是为页面上的每个轮播添加自定义 class（轮播 1、轮播 2、轮播 3、...），并为每个轮播添加一行到我的 JavaScript文件如：

$(".carousel-item.carousel1:first").addClass('active');
$(".carousel-item.carousel2:first").addClass('active');
$(".carousel-item.carousel3:first").addClass('active');

但是： 为了更灵活，是否有 JavaScript 解决方案以及它的工作原理 更通用且无需自定义 css class 每个轮播?

感谢您提前提供任何提示和技巧。

巴斯蒂安

Answer 1

您的轮播应该有不同的 parents，像这样您可以使用 first-of-type。

$(".carousel-item:first-of-type").addClass('active');

Answer 2

您需要遍历页面上的轮播，并从循环内定位每个轮播的第一个 .carousel-item。

HTML 从 BS4 文档中抓取并插入 3 次以模拟实际页面。 CSS 只是调出 'active' 项目，因为图像显然不会在这里工作。

$(document).ready(function(){
  $('.carousel').each(function(){
    $(this).find('.carousel-item').eq(0).addClass('active');
  });
});

/* demo only */
.carousel {
  border-bottom: 1px solid #ddd;
  margin-bottom : 2em;
  padding-bottom: 2em;
 }
.carousel-item.active img {
  color: green;
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div 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>
</div>

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

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

添加 css class 到页面上所有轮播的所有第一个轮播项目

Add css class to all first carousel items of all carousels on a page

javascript

dynamic-content

carousel

bootstrap-4