Use jQuery's .wrap all children above element
<p>i have the following HTML:</p>

<pre><code>&lt;div class="main_container"&gt;
  &lt;a href="#"&gt;Financial&lt;/a&gt;
  &lt;div class="sub_container"&gt;
    &lt;a href="#"&gt;Financial services&lt;/a&gt;
    &lt;a href="#"&gt;Government&lt;/a&gt;
  &lt;/div&gt;
  &lt;img class="image" src="img/img.png"&gt;
  &lt;a href="#"&gt;Education&lt;/a&gt;
  &lt;div class="sub_container"&gt;
    &lt;a href="#"&gt;Broadcast and media&lt;/a&gt;
    &lt;a href="#"&gt;Education&lt;/a&gt;
  &lt;/div&gt;
  &lt;a href="#"&gt;Government&lt;/a&gt;
  &lt;div class="sub_container"&gt;
    &lt;a href="#"&gt;Broadcast and media&lt;/a&gt;
    &lt;a href="#"&gt;Government&lt;/a&gt;
  &lt;/div&gt;
  &lt;img class="image" src="img/img.png"&gt;
&lt;/div&gt;
</code></pre>

<p>I.m trying to get wrap around all the elements above img tag, without results, i already try to use wrap, wrapAll, prevAll but those does not work.</p>

<p>Output code i'm trying to get:</p>

<pre><code>&lt;div class="main_container"&gt;

  &lt;div class="WRAP_CONTAINER"&gt;
      &lt;a href="#"&gt;Financial&lt;/a&gt;
      &lt;div class="sub_container"&gt;
        &lt;a href="#"&gt;Financial services&lt;/a&gt;
        &lt;a href="#"&gt;Government&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;img class="image" src="img/img.png"&gt;

  &lt;div class="WRAP_CONTAINER"&gt;
      &lt;a href="#"&gt;Education&lt;/a&gt;
      &lt;div class="sub_container"&gt;
        &lt;a href="#"&gt;Broadcast and media&lt;/a&gt;
        &lt;a href="#"&gt;Education&lt;/a&gt;
      &lt;/div&gt;
      &lt;a href="#"&gt;Government&lt;/a&gt;
      &lt;div class="sub_container"&gt;
        &lt;a href="#"&gt;Broadcast and media&lt;/a&gt;
        &lt;a href="#"&gt;Government&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;img class="image" src="img/img.png"&gt;
&lt;/div&gt;
</code></pre>

<p>Please help, I'm starting to lose senses.</p>
