Question

我想从帖子中删除最后的hr标签

代码的完整图片：

HTML代码：

  @forelse (auth()->user()->experiences->sortByDesc('subject') as $experience)
                    <div class="col-md-12">
                      <main class="experience" id="post">
                        <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
                        <span class="button is-link is-small text-right is-rounded"   data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
                        <h1>{{$experience->subject}}</h1>
                        <p class="subtitle is-6">{{$experience->experience_desc}}</p>
                        <hr>
                      </main>
                    </div>
                    @include('frontend.profile.experience.edit')
                    @include('frontend.profile.experience.delete')
                @empty
                    <p class="pl-3">لا يوجد خبرات في الوقت الحالي </p>
  @endforelse

我尝试了这段代码，但是删除了所有的hr标签：

#post hr:last-child {
   display:none;
}

Answer 1

假设<main />是每次迭代的返回值，则您希望每个迭代都有一个唯一的id。

<main class="experience" id="experience-{{$experience->id}}">
 <h1>{{$experience->subject}}</h1>
 <p class="subtitle is-6">{{$experience->experience_desc}}</p>
 <hr>
</main>

然后在CSS中将规则更改为

.experience:last-child hr {
   display:none;
}

Answer 2

我建议稍微更改HTML结构。在这里，我向您的包含元素“行”添加了一个类，然后将“ col-md-12”类移至了main元素中。

<div class="row experiences">
    @forelse (auth()->user()->experiences->sortByDesc('subject') as $experience)
      <main class="experience col-md-12">
        <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
        <span class="button is-link is-small text-right is-rounded"   data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
        <h1>{{$experience->subject}}</h1>
        <p class="subtitle is-6">{{$experience->experience_desc}}</p>
        <hr>
      </main>
        @include('frontend.profile.experience.edit')
        @include('frontend.profile.experience.delete')
    @empty
        <p class="pl-3">لا يوجد خبرات في الوقت الحالي </p>
    @endforelse
</div>

应该会产生类似以下代码的HTML。 CSS利用main元素的优势，在“ experiences”下找到最后一个main，找到hr并将其隐藏。

.experiences main:last-of-type hr { display: none; }

<div class="row experiences">
  <main class="experience col-md-12">
    <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
    <span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
    <h1>{{$experience->subject}}</h1>
    <p class="subtitle is-6">{{$experience->experience_desc}}</p>
    <hr>
  </main>
  <main class="experience col-md-12">
    <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
    <span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
    <h1>{{$experience->subject}}</h1>
    <p class="subtitle is-6">{{$experience->experience_desc}}</p>
    <hr>
  </main>
  <main class="experience col-md-12">
    <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
    <span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
    <h1>{{$experience->subject}}</h1>
    <p class="subtitle is-6">{{$experience->experience_desc}}</p>
    <hr>
  </main>
</div>

很明显，如果您的@include('frontend.profile.experience.edit')或@include('frontend.profile.experience.delete')插入了main元素，则可能无法正常工作...

Answer 3

如果您使用Laravel，则可以使用$loop变量：

@if (!$loop->last)
    <hr />
@endif

如何从最近的帖子中删除hr标签？

3 个答案: