Question

我的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>

Answer 1

鉴于所有元素都有一个公共类，您可以使用eq()通过索引将新内容放在所需位置。试试这个：

$('#addmore').click(function () {
    var newData = '<div>FOO</div>';
    $('.col-lg-6 .form-group').eq(-1).before(newData);
});

Example fiddle

请注意，向eq()提供负数表示您希望从匹配集的末尾向后计数。

Answer 2

您可以使用.last()和.prev()

的组合

$('#addmore').click(function () {
    var newData = '<div>Whatever</div>';
    $('.col-lg-6').find('.form-group').last().prev().after(newData);
});

Example

Answer 3

你可以这样做：

function insertAt(selector,index,newData) {
    if(index ===0) {
     $(selector).prepend(newData);        
     return;
    }
    $(selector+" > div:nth-child(" + index+ ")").after(newData);
}

小提琴：http://jsfiddle.net/13qu1htp/3/

Answer 4

您可以使用以下脚本在倒数第二个位置添加新div。

$（ '＃addmore'）。点击（函数（）{ $（'。col-lg-6＆gt; .form-group：nth-child（3）'）。after（$（'my html-new one'））; }）

在特定位置JQuery插入HTML

4 个答案: