jquery里面有一列div,点击按钮在最下面添加一个div并把div里面的文本加1
时间: 2023-11-28 10:48:12 浏览: 71
按钮进行加一
可以使用以下代码实现:
HTML代码:
```html
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<button id="addBtn">Add Box</button>
</div>
```
jQuery代码:
```javascript
$(document).ready(function() {
$('#addBtn').click(function() {
var numBoxes = $('.box').length;
var newBoxNum = numBoxes + 1;
var newBox = $('<div class="box">' + newBoxNum + '</div>');
$('.wrapper').append(newBox);
$('.box').last().text(parseInt($('.box').last().text()) + 1);
});
});
```
首先,我们在HTML中定义了一个包含一些带有“box”类的div的“wrapper” div和一个“添加框”按钮。
在jQuery代码中,我们首先监听“添加框”按钮的点击事件。当该按钮被点击时,我们使用jQuery的.length方法获取当前页面中具有“box”类的div的数量,并将其存储在变量numBoxes中。
接下来,我们创建一个新的div元素,并将其添加到“wrapper” div中。我们还更新新div的文本,使其等于当前最后一个具有“box”类的元素的文本值加1。
最后,我们使用jQuery的last方法选择刚刚添加的最后一个具有“box”类的元素,并使用jQuery的text方法将其文本更新为新值。
阅读全文