使用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（）選擇器

 $(".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()方法獲取前三個元素集合。

<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>'; }