jQuery：在元素之前关闭 div，然后再重新打开该 div答案

【问题标题】：jQuery: Close Div before element to then reopen that div afterwardsjQuery：在元素之前关闭 div，然后再重新打开该 div
【发布时间】：2017-03-07 21:42:50
【问题描述】：

我在我的容器中间，想从那个容器中取出一个图像。

现在我有这样的东西

<div class="container">
    ...
    <img />
    ...
</div>

我想用 jQuery 来做这个

<div class="container">
    ...
</div>
<img />
<div class="container">
    ...
</div>

这就是问题所在。我无法修改我的代码以在之前关闭和之后重新打开（使用 PHP 或 HTML）。我正在使用 WP，<img /> 位于内容的中间。那个 img src 可以改变，它的属性也可以改变。所以我只是无法通过正则表达式来摆脱它。考虑到容器中的所有东西都不能用 PHP 来处理（如果你有办法用 PHP 隔离那个 img，我愿意，但我认为没有办法。）

我在 jQuery 中发现的所有内容都迫使您在打开 div 时也将其关闭，而且您不能只在所选元素之前关闭 div。

在一天结束时（有点像整个事情的 TLDR），我想做的是在图像之前抛出一个</div>，在图像之后抛出一个<div class="container">。在 PHP 中似乎无法做到这一点，正在寻找一种 jQuery 方式来做到这一点。

PS：我猜原版的 js 方式也可以？

【问题讨论】：

它是容器中唯一的图像吗？
可以，但我希望我的代码能够多次处理。

标签： javascript jquery wordpress dom

【解决方案1】：

我相信您正在寻找类似的东西？

https://jsfiddle.net/tr_santi/kcqcmp6d/（点击右上角“重新排序”）

var $container = $(".container");       //Get container
var $img = $container.find("img");      //Find image in container

$img.detach().insertAfter($container);  //Move the image to be after the container

var $newContainer = $container.clone(); //Duplicate the container
$newContainer.insertAfter($img);        //Insert the duplicated container after the image

之前的 HTML：

<div class="container">
    <img ... />
</div>

HTML 之后：

<div class="container"></div>
<img ... />
<div class="container"></div>

【讨论】：