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

【问题标题】：How to check if element is first child?如何检查元素是否是第一个孩子？
【发布时间】：2018-05-31 01:11:03
【问题描述】：

我正在尝试使我的引导轮播动态化，但在正确注入我的数据时遇到了一些问题。现在，我只是想找到注入数据的第一个孩子，并为第一个孩子添加一个“活动”类。我正在使用 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 元素。我将如何实现这一目标？

【问题讨论】：

$('#carouselExampleIndicators li:nth-child(1)') 将使用:nth-child() 获取第一个li 索引以1 开头，而使用:eq() 索引以0 开头
或者，您可以使用$loop->first 检查当前迭代是否是@foreach 中的第一个元素。你可以阅读更多关于docs

标签： jquery html laravel bootstrap-4

【解决方案1】：

查看 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

【讨论】：

【解决方案2】：

在carousel-inner div 中选择第一个子元素并添加一个名为active 的类

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

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

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

【讨论】：

【解决方案3】：

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

   ...

【讨论】：