在特定位置插入JQuery

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

您可以使用.last()和.prev()的组合

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

示例

Answer 2

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

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

例琴

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

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/