如何包装所有下一个元素直到？

Question

我关注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>

我想要实现的是，将每个 .menuItem 和所有下一个 .submenuItem 包装成 .menuSet。不幸的是，下面的 js 包装了整个代码片段，而不是上面定义的集合。

<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>

为了让我的意图更容易理解，下面是我post想要的结果：

$(".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>

Answer 1

当您使用 class 选择所有 menuItem 并从那里过滤时，wrapAll 将包装您的整个集合。

要解决这个问题，一种方法是使用 $.each() 并遍历菜单项，然后将它们包装起来。

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

JSFiddle Demo

.

如何包装所有下一个元素直到？

How to wrap all next elements until?

html

javascript

jquery

wrapall

JSFiddle Demo