我的HTMl就像这样
<div class="col-lg-6">
<div class="form-group">
my html-1
</div>
<div class="form-group">
my html-2
</div>
<div class="form-group">
my html-3
</div>
<div class="form-group">
my html-4
</div>
</div>
我想在my html-4
和my html-3
之间插入新的HTML。意味着倒数第二的位置。
我怎样才能使用JQuery?
我做过类似的事情
$('#addmore').click(function () {
var newData = My new HTML, I will get here
$('.col-lg-6').append(newData);
});
但是这会将新HTML插入到最后一个位置。我希望它总是插在倒数第二的位置。 预期产出
<div class="col-lg-6">
<div class="form-group">
my html-1
</div>
<div class="form-group">
my html-2
</div>
<div class="form-group">
my html-3
</div>
<div class="form-group">
my html-new one
</div>
<div class="form-group">
my html-4
</div>
</div>
答案 0 :(得分:5)
鉴于所有元素都有一个公共类,您可以使用eq()
通过索引将新内容放在所需位置。试试这个:
$('#addmore').click(function () {
var newData = '<div>FOO</div>';
$('.col-lg-6 .form-group').eq(-1).before(newData);
});
请注意,向eq()
提供负数表示您希望从匹配集的末尾向后计数。
答案 1 :(得分:2)
$('#addmore').click(function () {
var newData = '<div>Whatever</div>';
$('.col-lg-6').find('.form-group').last().prev().after(newData);
});
答案 2 :(得分:2)
你可以这样做:
function insertAt(selector,index,newData) {
if(index ===0) {
$(selector).prepend(newData);
return;
}
$(selector+" > div:nth-child(" + index+ ")").after(newData);
}
答案 3 :(得分:0)
您可以使用以下脚本在倒数第二个位置添加新div。
$( '#addmore')。点击(函数(){ $('。col-lg-6&gt; .form-group:nth-child(3)')。after($('my html-new one')); })