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>
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>");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.