jQuery：这个任务有更好的解决方案吗？

Question

这是一个HTML菜单代码：

<div class="sub-menu">
  <div class="sub-rubric menu-item"><a href="#">RUBRIC -1-</a></div>
  <div class="menu-item"><a href="/link/">1111111</a></div>

  <div class="sub-rubric menu-item"><a href="#">RUBRIC -2-</a></div>
  <div class="menu-item"><a href="/link/">2222222</a></div>
  <div class="menu-item"><a href="/link/">3333333</a></div>
  <div class="menu-item"><a href="/link/">4444444</a></div>
  <div class="menu-item"><a href="/link/">5555555</a></div>

  <div class="sub-rubric menu-item"><a href="#">RUBRIC -3-</a></div>
  <div class="menu-item"><a href="/link/">6666666</a></div>
  <div class="menu-item"><a href="/link/">6666666</a></div>
</div>

请注意，有些<div>有一个类"sub-rubric"，它们会引导<div class="menu-item">元素组。

我们的想法是将每个由div.menu-item引导的div.sub-rubric元素组包裹在<div>元素中。

结果必须如下：

<div class="sub-menu">

  <div class="sub-rubric-wrap">
    <div class="sub-rubric menu-item"><a href="#">RUBRIC -1-</a></div>
    <div class="menu-item"><a href="/link/">1111111</a></div>
  </div>

  <div class="sub-rubric-wrap">
    <div class="sub-rubric menu-item"><a href="#">RUBRIC -2-</a></div>
    <div class="menu-item"><a href="/link/">2222222</a></div>
    <div class="menu-item"><a href="/link/">3333333</a></div>
    <div class="menu-item"><a href="/link/">4444444</a></div>
    <div class="menu-item"><a href="/link/">5555555</a></div>
  </div>

  <div class="sub-rubric-wrap">
    <div class="sub-rubric menu-item"><a href="#">RUBRIC -3-</a></div>
    <div class="menu-item"><a href="/link/">6666666</a></div>
    <div class="menu-item"><a href="/link/">6666666</a></div>
  </div>
</div>

以下是我的解决方案：

while ($('.sub-menu').children('.sub-rubric').length > 0) {
    $('.sub-menu').children('.sub-rubric').first()
        .nextUntil('.sub-rubric')
        .add($('.sub-menu').children('.sub-rubric').first())
        .wrapAll('<div class="sub-rubric-wrap"></div>');
}

a {
  text-decoration: none;
}

.sub-rubric a {
  color: black;
}

.sub-rubric-wrap {
  margin: 10px 0 0 10px;
  outline: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sub-menu">
  <div class="sub-rubric menu-item"><a href="#">RUBRIC -1-</a></div>
  <div class="menu-item"><a href="/link/">1111111</a></div>

  <div class="sub-rubric menu-item"><a href="#">RUBRIC -2-</a></div>
  <div class="menu-item"><a href="/link/">2222222</a></div>
  <div class="menu-item"><a href="/link/">3333333</a></div>
  <div class="menu-item"><a href="/link/">4444444</a></div>
  <div class="menu-item"><a href="/link/">5555555</a></div>

  <div class="sub-rubric menu-item"><a href="#">RUBRIC -3-</a></div>
  <div class="menu-item"><a href="/link/">6666666</a></div>
  <div class="menu-item"><a href="/link/">6666666</a></div>
</div>

有更好的方法吗？