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

nom7f22z 于 11个月前发布在 Java

关注(0)|答案(6)|浏览(116)

我想用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;（.

JavaScript

来源：https://stackoverflow.com/questions/42980163/add-a-div-only-inside-the-first-three-divs-with-jquery

6条答案

按热度按时间

xjreopfe1#

您可以使用:lt() selector

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

个字符

赞(0）回复(0）举报 11个月前

v6ylcynt2#

使用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>

型

赞(0）回复(0）举报 11个月前

fivyi3re3#

这将获得前3个div，并将box作为一个类。

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

字符串
编辑：APAD1给了你一个更好的方法来做到这一点。

赞(0）回复(0）举报 11个月前

6bc51xsx4#

第一个月

赞(0）回复(0）举报 11个月前

cotxawn75#

如果您需要非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>'
});

型

赞(0）回复(0）举报 11个月前

jv4diomz6#

$(".wrapper .box:lt(3)").removeClass("d-none");

个字符

赞(0）回复(0）举报 11个月前

我来回答

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

6条答案

相关问题

热门标签

最新问答