javascript - WrapAll 与 NextUntil

Question

如何确保所有带有 .px-sub-menu-item 的类都包含在一个 div 中？

(function($) {
  $('.px-sub-menu-item').each(function() {
    $(this).nextUntil('.px-sub-menu-item').addBack('.px-sub-menu-item').wrapAll('<div class="px-menu-wrap"></div>');
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a href="#" class="px-main-menu-item">Home</a><br>
  <a href="#" class="px-sub-menu-item">Submenu 1</a><br>
  <a href="#" class="px-main-menu-item">Home 2</a><br>
  <a href="#" class="px-sub-menu-item">Submenu 2</a><br>
  <a href="#" class="px-sub-menu-item">Submenu 3</a><br>
  <a href="#" class="px-main-menu-item">Home 3</a><br>
</nav>

https://jsfiddle.net/kqzj1tex/

Answer 1

wrapAll 将所有选择器包含到一个 div 中。如果你想把每一个.px-sub-menu-item包裹成单独的div，你需要使用wrap函数。

$('.px-sub-menu-item').wrap('<div></div>');

div > .px-sub-menu-item{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>

<a href="#" class="px-main-menu-item">Home</a><br>
<a href="#" class="px-sub-menu-item">Submenu 1</a><br>
<a href="#" class="px-main-menu-item">Home 2</a><br>
<a href="#" class="px-sub-menu-item">Submenu 2</a><br>
<a href="#" class="px-sub-menu-item">Submenu 3</a><br>                      
<a href="#" class="px-main-menu-item">Home 3</a><br>

</nav>