javascript - 如何使用 jQuery 将元素附加到第四个子元素？

Question

我有一个部分，其中有 slider ，现在我想将元素附加到其子元素内的第四个元素。

这是我的 HTML

这是我迄今为止尝试过的

 $(".owl-stage>div:nth-child(4)").after("<div>inserted div</div>");

我需要改变什么才能得到我想要的东西？

Answer 1

如果您愿意append某些元素到第四个元素使用 $(".owl-stage>div:nth-child(4) .item:eq(1) .text-center").append("<div>inserted div</div>");

现在，如果您运行演示并一直向下滚动并检查 inserted div然后你可以看到它被附加到<div class="owl-item active" style="width: 1140px;">

演示

$(".owl-stage>div:nth-child(4) .item:eq(1) .text-center").append("<div>inserted div</div>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-stage">
  <div class="owl-item cloned" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

        </div>
        <div class="col-md-6 text-center">
          <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/09/grafika_do_filmu2.png">
        </div>
      </div>
    </div>
  </div>
  <div class="owl-item cloned" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

        </div>
        <div class="col-md-6 text-center">
          <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/Grow-your-brand.png">
        </div>
      </div>
    </div>
  </div>
  <div class="owl-item" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

        </div>
        <div class="col-md-6 text-center">
          <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/videommerce_share_your_story.png">
        </div>
      </div>
    </div>
  </div>
  <div class="owl-item active" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

          <div class="col-md-6 text-center">
            <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/09/grafika_do_filmu2.png">
          </div>
        </div>
      </div>
    </div>
    <div class="owl-item" style="width: 1140px;">
      <div class="item">
        <div class="row sec-padding flex-center">
          <div class="col-md-6 mb-50px z-index-1">

          </div>
          <div class="col-md-6 text-center">
            <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/Grow-your-brand.png">
          </div>
        </div>
      </div>
    </div>
    <div class="owl-item cloned" style="width: 1140px;">
      <div class="item">
        <div class="row sec-padding flex-center">
          <div class="col-md-6 mb-50px z-index-1">

            <div class="col-md-6 text-center">
              <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/videommerce_share_your_story.png">
            </div>
          </div>
        </div>
      </div>
      <div class="owl-item cloned" style="width: 1140px;">
        <div class="item">
          <div class="row sec-padding flex-center">
            <div class="col-md-6 mb-50px z-index-1">

            </div>
            <div class="col-md-6 text-center">
              <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/09/grafika_do_filmu2.png">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>