Question

我对jQuery有疑问。

例如，我有以下结构：

<div class="page">
    <p>Lorem ipsum....</p>
    <p>Lorem ipsum....</p>
    ...
</div>

我需要把它变成：

<div class="page">
    <p>Lorem ipsum....</p>
</div>
<div class="page">
    <p>Lorem ipsum....</p>
</div>
...

将div分为两个（或更多）。我该怎么办？

Answer 1

使用unwrap()然后再次wrap() <div class="page"></div>

中的元素

＆＃13;

function splitDiv() {
  $("p").unwrap().wrap("<div class='page'></div>");
}

＆＃13;

.page {
  border: 2px solid green;
  margin: 4px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">
  <p>Lorem ipsum....</p>
  <p>Lorem ipsum....</p>
</div>



<button onclick="splitDiv()">Split into diffrent <b>Divs</b></button>

＆＃13;

Answer 2

你可以循环每个p然后dinamicaly添加新的div并附加p

$('div p').each(function(ix, el){
  var tmp = $('<div class="page"/>');
  $('body').append( $(tmp).append( $(el) ) );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
    <p>Lorem ipsum....</p>
    <p>Lorem ipsum....</p>
</div>

Answer 3

动态可以分割Html标签。我只是修改一些代码。 Thanx。

＆＃13;

function splitHtml(tag1,tag1class, tag2) {
  $(tag2).unwrap().wrap(tag1);
}

＆＃13;

.page {
  border: 2px dotted gray;
  margin: 4px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">
  <p>Lorem ipsum....</p>
  <p>Lorem ipsum....</p>
</div>



<button onclick="splitHtml('<div class=page>','page','p')">Split into diffrent <b>Divs</b></button>

<button onclick="splitHtml('<H1 class=page>','page','p')">Split into <b>H1</b></button>

＆＃13;

如何在jQuery中划分div？

3 个答案: