使用NextUntil的WrapAll

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将所有选择器都包含在one 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>

​