1

jQuery 是否可以在标有标签的指定点将 1 个 Div 拆分为 2 个 Div

在这个代码示例中，我在想是否可以在“em 标签”处拆分 div 以制作 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>
4

3 回答 3

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 放在最后一个元素之后。

于 2013-02-21T10:07:21.667 回答
0

不是很漂亮，但会起作用：

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

前提是您的制动元件具有.break( <em class="break"></em>) 类。

http://jsfiddle.net/U3p3e/

于 2013-02-21T10:07:00.593 回答
0

您可以创建一个主 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>');
于 2013-02-21T09:48:56.457 回答