javascriptjqueryhtmlwrapall

How to wrap all next elements until?

I have following html:

<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>

What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.

<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>

For make my intention more understandable, below I post the desired result:

$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
  <div class="menuItem">Domů</div>
</div>
<div class="menuSet">
  <div class="menuItem">O nás</div>
</div>
<div class="menuSet">
  <div class="menuItem">Výzkum a vývoj</div>
  <div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
  </div>
  <div class="submenuItem"><b>Odprašky</b>
  </div>
  <div class="submenuItem"><b>Guma</b>
  </div>
  <div class="submenuItem"><b>Zemědělství</b>
  </div>
  <div class="submenuItem"><b>Potravinářství</b>
  </div>
</div>
<div class="menuSet">
  <div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
  <div class="menuItem">Realizace</div>
  <div class="submenuItem"><b>realizace podstránka</b>
  </div>
</div>
<div class="menuSet">
  <div class="menuItem">Kontakty</div>
</div>

Solution

  • As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.

    To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.

    $(".menuItem").each(function (index) {
    $(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});

    JSFiddle Demo

    .