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

Question

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

我的示例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>

Answer 2

使用slice()方法获取前3个元素集合。

<script>
$( ".wrapper .box" ).slice(0, 3).append( "<div>Hello</div>" );
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" ).slice(0, 3).append( "<div>Hello</div>" );
</script>

<小时/> 如果div是兄弟，则使用:nth-child伪类选择器。

<script>
$( ".wrapper .box:nth-child(-n+3)" ).append( "<div>Hello</div>" );
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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:nth-child(-n+3)").append("<div>Hello</div>");
</script>

Answer 3

如果您需要非jquery版本

var wrapper = document.querySelector('.wrapper');

wrapper.children[0].innerHTML = '<div>Hello</div>';
wrapper.children[1].innerHTML = '<div>Hello</div>';
wrapper.children[2].innerHTML = '<div>Hello</div>';

或上述的其他版本将是

[].slice.call(document.querySelectorAll('.wrapper .box'),0,3).forEach(function(div){
   div.innerHTML = '<div>Hello</div>'
});

Answer 4

这将获得带有框作为类的前3个div。

for(var i=1;i<4;i++){
$( ".wrapper .box:nth-of-type(" + i + ")" ).append( "<div>Hello</div>" );
}

编辑：APAD1为您提供了更好的方法。

Answer 5

var allBoxes = document.querySelectorAll('.box'); for(var i = 0; i < 3; i++) { allBoxes[i].innerHTML = '<div></div>'; }