Как проверить, является ли элемент первым дочерним?

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>

Я пытаюсь добавить «активный» класс к элементу #carouselExampleIndicators li.Как бы я этого достиг?

Answer 1

<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 2

См. Документацию laravel 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

Answer 3

Выбирает первый дочерний элемент внутри carousel-inner div и добавляет класс с именем active

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

В качестве альтернативы вы можете использовать и выбрать конкретного дочернего элемента, заменив n нужным дочерним номером

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