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

wrapAlldivに全てのセレクタを含みます。それぞれ.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>