javascript - 使用jquery仅在前三个div中添加一个div

Question

我想用 jquery 在前三个 div 中添加一个新的 div。有没有办法像 :nth-child in css 那样做到这一点？

我的示例 html:

<div class="wrapper">
  <div class="box"><!-- add div --></div>
  <div class="box"><!-- add div --></div>
  <div class="box"><!-- add div --></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

我知道类似的事情:

<script>
$( ".wrapper .box" ).append( "<div>Hello</div>" );
</script>

...但这会在所有 div 中添加新的 div ;(.

Answer 1

您可以使用 :lt() selector

$(".wrapper .box:lt(3)").append("<div>Hello</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>