[英]Add a div only inside the first three divs with jquery
I want to add a new div inside the first three divs with jquery. 我想用jQuery在前三个div内添加一个新的div。 Is there a way to do this like :nth-child in css?
有没有办法在CSS中像:nth-child这样呢?
My example html: 我的示例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>
I know something like: 我知道类似:
<script>
$( ".wrapper .box" ).append( "<div>Hello</div>" );
</script>
... but this will add the new div inside all divs ;(. ...但是这会将新的div添加到所有div;(。
You can use the :lt() selector 您可以使用: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>
Use slice()
method to get first 3 elements collection. 使用
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>
:nth-child
pseudo-class selector if divs are siblings.
: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>
If you need a non-jquery version 如果您需要非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>';
or another version of the above would be 或上面的另一个版本是
[].slice.call(document.querySelectorAll('.wrapper .box'),0,3).forEach(function(div){
div.innerHTML = '<div>Hello</div>'
});
This will get the first 3 divs with box as a class. 这将获得带框作为类的前3个div。
for(var i=1;i<4;i++){
$( ".wrapper .box:nth-of-type(" + i + ")" ).append( "<div>Hello</div>" );
}
Edit: APAD1 gave you a better way to do this. 编辑:APAD1为您提供了更好的方法。
var allBoxes = document.querySelectorAll('.box'); for(var i = 0; i < 3; i++) { allBoxes[i].innerHTML = '<div></div>'; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.