从JavaScript DOM中的父节点拆分节点

Question

我有像这样的DOM HTML

<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

我想从div“width_medium”移开div class“video”。结果将是这样的

<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
</div>
<div class="width_medium">
  <div class="video">Video</div>
</div>
<div class="width_medium">
  <p>Text 3</p>
  <p>Text 4</p>
</div>

我怎么能用jQuery做到这一点？

Answer 1

＆＃13;

＆＃13;

$(".video").unwrap();
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")

＆＃13;

.width_medium p {
  background-color: blue
}

.width_medium .video {
  background-color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

＆＃13;

＆＃13;

＆＃13;

1. 打开元素。
2. 使用.prevAll()和.nextAll()以及.wrapAll()来保护所有上一页和下一页
3. 使用.wrap()作为课堂视频

<强>更新

首先按照上一步骤进行解包，然后将.parent()添加到.video，然后使用unwrap()

＆＃13;
＆＃13;
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
$(".video").parent().unwrap();
＆＃13;
.width_medium p {
  background-color: blue
}

.width_medium .video {
  background-color: red
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>
＆＃13;
＆＃13;
＆＃13;