Question

我有以下HTML字符串

<div class="row">
    <div class="col-sm-4">
    content
    </div>
    <div class="col-sm-4">      
    content
    </div>
    <div class="col-sm-4">
    contnt
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
    content
    </div>
    <div class="col-sm-4">      
    content
    </div>
</div>

我想插入

<div class="col-sm-4">content</div>

在第二行的末尾（在结束div标签之前），以便第二行有三个元素。

我尝试使用Jquery完成任务，但我无法做到。我尝试的最新内容如下（假设长html存储在HTML中，以及要插入的PIECE。

$(HTML).find('.col-sm-4').last().after(PIECE);

任何人都可以帮助我吗？必须有一个JQuery方式。

更新：还有一件事我忘了说：

行数不固定。我想将PIECE插入最后一行。 请注意，长HTML字符串不是页面的一部分。它只是存储在Javascript变量中的字符串。我需要插入

class="col-sm-4">content</div>

进入它。在我的许多测试中，我发现这对我来说非常困难。

谢谢！

Answer 1

这是一种方法。

$('.row:last').append(PIECE);

请参阅小提琴：http://jsfiddle.net/tu935/它确实有用。

HTML.replace(/<\/div>$/,PIECE+'</div');

Answer 2

您可以使用：

$('.row').eq(1).find(':last').after('<div class="col-sm-4">content</div>');

<强> Fiddle Demo

根据您的评论，您可以执行以下操作：

$('.row').last().find(':last').after('<div class="col-sm-4">content</div>');

Answer 3

为要添加孩子的行分配ID，如下所示：

<div class="col-sm-4" id="test">content</div>

然后将其添加到javascript：

$('#test').find(':last').after('<div class="col-sm-4">content</div>');
OR
$('#test').append('<div class="col-sm-4">content</div>');

如果可能的话，尝试在div中使用span

Jquery：在HTML字符串中插入一个元素？

3 个答案: