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

Question

我有以下 html：

\n\n

\r\n

\r\n

<div class="menuItem">Dom\xc5\xaf</div>\r\n<div class="menuItem">O n\xc3\xa1s</div>\r\n<div class="menuItem">V\xc3\xbdzkum a v\xc3\xbdvoj</div>\r\n<div class="submenuItem"><b>Aplikace aktivn\xc3\xadho gumov\xc3\xa9ho pr\xc3\xa1\xc5\xa1ku</b>\r\n</div>\r\n<div class="submenuItem"><b>Odpra\xc5\xa1ky</b>\r\n</div>\r\n<div class="submenuItem"><b>Guma</b>\r\n</div>\r\n<div class="submenuItem"><b>Zem\xc4\x9bd\xc4\x9blstv\xc3\xad</b>\r\n</div>\r\n<div class="submenuItem"><b>Potravin\xc3\xa1\xc5\x99stv\xc3\xad</b>\r\n</div>\r\n<div class="menuItem">Projek\xc4\x8dn\xc3\xad \xc4\x8dinnost</div>\r\n<div class="menuItem">Realizace</div>\r\n<div class="submenuItem"><b>realizace podstr\xc3\xa1nka</b>\r\n</div>\r\n<div class="menuItem">Kontakty</div>

\r\n

\r\n

\r\n

\n\n

我想要实现的目标是.menuItem用. 不幸的是，以下 js 包装了整个片段，而不是上面定义的集合。.submenuItem.menuSet

\n\n

\r\n

\r\n

<div class="menuItem">Dom\xc5\xaf</div>\r\n<div class="menuItem">O n\xc3\xa1s</div>\r\n<div class="menuItem">V\xc3\xbdzkum a v\xc3\xbdvoj</div>\r\n<div class="submenuItem"><b>Aplikace aktivn\xc3\xadho gumov\xc3\xa9ho pr\xc3\xa1\xc5\xa1ku</b>\r\n</div>\r\n<div class="submenuItem"><b>Odpra\xc5\xa1ky</b>\r\n</div>\r\n<div class="submenuItem"><b>Guma</b>\r\n</div>\r\n<div class="submenuItem"><b>Zem\xc4\x9bd\xc4\x9blstv\xc3\xad</b>\r\n</div>\r\n<div class="submenuItem"><b>Potravin\xc3\xa1\xc5\x99stv\xc3\xad</b>\r\n</div>\r\n<div class="menuItem">Projek\xc4\x8dn\xc3\xad \xc4\x8dinnost</div>\r\n<div class="menuItem">Realizace</div>\r\n<div class="submenuItem"><b>realizace podstr\xc3\xa1nka</b>\r\n</div>\r\n<div class="menuItem">Kontakty</div>

\r\n

\r\n

\r\n

\n\n

为了让我的意图更容易理解，下面我发布了期望的结果：

\n\n

\r\n

\r\n

$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class=\'menuSet\'></div>");

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\r\n<div class="menuSet">\r\n  <div class="menuItem">Dom\xc5\xaf</div>\r\n</div>\r\n<div class="menuSet">\r\n  <div class="menuItem">O n\xc3\xa1s</div>\r\n</div>\r\n<div class="menuSet">\r\n  <div class="menuItem">V\xc3\xbdzkum a v\xc3\xbdvoj</div>\r\n  <div class="submenuItem"><b>Aplikace aktivn\xc3\xadho gumov\xc3\xa9ho pr\xc3\xa1\xc5\xa1ku</b>\r\n  </div>\r\n  <div class="submenuItem"><b>Odpra\xc5\xa1ky</b>\r\n  </div>\r\n  <div class="submenuItem"><b>Guma</b>\r\n  </div>\r\n  <div class="submenuItem"><b>Zem\xc4\x9bd\xc4\x9blstv\xc3\xad</b>\r\n  </div>\r\n  <div class="submenuItem"><b>Potravin\xc3\xa1\xc5\x99stv\xc3\xad</b>\r\n  </div>\r\n</div>\r\n<div class="menuSet">\r\n  <div class="menuItem">Projek\xc4\x8dn\xc3\xad \xc4\x8dinnost</div>\r\n</div>\r\n<div class="menuSet">\r\n  <div class="menuItem">Realizace</div>\r\n  <div class="submenuItem"><b>realizace podstr\xc3\xa1nka</b>\r\n  </div>\r\n</div>\r\n<div class="menuSet">\r\n  <div class="menuItem">Kontakty</div>\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

当您选择所有menuItem带有类的 ' 并从那里进行过滤时，wrapAll将包装您的整个集合。

为了解决这个问题，一种方法是使用$.each()并迭代 menuItems，然后包装它们。

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

JSFiddle 演示

。