Question

我正在尝试使我的引导程序轮播动态，并且在正确注入数据时遇到一些麻烦。现在，我只是想找到我注入数据的第一个孩子，并为第一个孩子添加一个“活跃”类。我正在使用Laravel Blade来重现我的数据。这是我的HTML：

<div id="carousel-container" class="container">
        <div class="row">
            <div class="col-lg-12 col-sm-12">

            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">

                @foreach($event->images as $image)
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="carousel_image"></li>
                @endforeach


              </ol>

              <script>

                $(document).ready(function() {
                    if ($(element).find('carousel-indicators')is(':first-child')) {
                            $(element).addClass('active');
                        }
                });

              </script>

            <div class="carousel-inner">

              @foreach($event->images as $image)
                <div class="carousel-item active">
                    <img class="d-block w-100" src="/events/images/{{ $image->imageName }}" alt="First slide"></div>
                </div>

                <div class="carousel-caption d-none d-md-block">
                    <h5>{{$event->name}}</h5>
                    <p>{{$event->shortDescription}}</p>
                </div>
              @endforeach

              <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>

            <button class="btn btn-lg btn-primary btn-block submit_buttons" type="submit">Register here!</button>

            </div>
        </div>
    </div>

我正在尝试将“active”类添加到#carouselExampleIndicators li元素中。我怎么做到这一点？

Answer 1

选择carousel-inner div中的第一个子节点并添加名为active

的类

$("carousel-inner:first-child").addClass("active");

或者，您可以使用并选择一个特定的孩子，用您想要的孩子号码替换n

$("carousel-inner:nth-child(n)")...

Answer 2

<div id="carousel-container" class="container">
   ...
          <ol class="carousel-indicators">

            @foreach($event->images as $index => $image)
                <li class="{{ $index == 0 ? 'active' : '' }}" data-target="#carouselExampleIndicators" data-slide-to="0" class="carousel_image"></li>
            @endforeach

          </ol>

   ...

Answer 3

参见laravel documntation https://laravel.com/docs/5.5/blade

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif

    @if ($loop->last)
        This is the last iteration.
    @endif

    <p>This is user {{ $user->id }}</p>
@endforeach

如何检查元素是否是第一个孩子？

3 个答案: