jQuery：關閉元素之前的div然後重新打開該div之後

Question

我處於我的容器中間，並且想從該容器中取出圖像。

現在，我有這樣的事情

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

而且我想用jQuery

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

做到這一點這裏的問題。我無法修改我的代碼以在關閉之前關閉並在（使用PHP或HTML）之後重新打開。我正在與WP合作，<img />正處於內容的中間。 img src可以改變，它的屬性也可以改變。所以我只是不能用我的方式表達出來。考慮一下容器內的所有東西都不能用PHP來觸及（如果你有辦法將這個img與PHP隔離開來，但我認爲沒有辦法。）

我發現的所有東西jQuery強制你在打開div時也關閉它，而你不能在選定的元素之前關閉div。

在一天結束時（整個事情的TLDR的種類），我想要做的就是在圖像之前丟出</div>之前和<div class="container">。似乎無法在PHP中實現，並尋找一種jQuery方式來實現。

PS：我想香草js的方式也可以嗎？

Answer 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 BEFORE：

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

HTML AFTER：

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