在特定位置JQuery插入HTML

时间:2015-01-26 09:08:19

标签: javascript jquery html

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

4 个答案:

答案 0 :(得分:5)

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

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

Example fiddle

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

答案 1 :(得分:2)

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

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

Example

答案 2 :(得分:2)

你可以这样做:

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

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

答案 3 :(得分:0)

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

$( '#addmore')。点击(函数(){ $('。col-lg-6&gt; .form-group:nth-​​child(3)')。after($('my html-new one')); })