Question

jQuery是否可以在标记为

的指定点将1 Div拆分为2 Div

在这个代码示例中，我想可以将div分割为'em标签'来制作 2 div的

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
    <em></em>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
</div>

到

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
</div>

Answer 1

您可以使用以下代码解决您的问题。为此，为父div分配一个id，并在保留其内部html后删除其html。我们可以在将html存储到变量中后删除父div，但我不这样做，因为我们必须将修改后的html放在同一个地方。

var divhtml = $("#divId").html();
var myps = divhtml.split("<em></em>");
var myhtml = "<div>"+myps[0]+"</div><div>"+myps[1]+"</div>";
$("#divId").html(myhtml);

如果您必须删除父标记，则可以获取最后一个元素ID，在将html存储在变量中后删除主div，并将修改后的html放在最后一个元素之后。

Answer 2

您可以创建一个主div并使用append（）函数将任何HTML附加到其中。例如：

  <div id='main'>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  </p>

  <em></em>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  </p>

</div>

在JQuery中：

varHtml = $('#main').html();

// You can use JS function to split

$('#main').html("");

$('#main').append('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p><em></em>');

$('#main').append('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  </p>');

Answer 3

不是很漂亮但会起作用：

$('div').after(function() {
    return $('<div>').append($(this).find('.break').nextAll());
}).find('.break').remove();

假设您的制动元件具有等级.break（<em class="break"></em>）。

http://jsfiddle.net/U3p3e/

将1 div分成2个独立的div？

3 个答案: