jquery - Wrapping a series of elements between classes until it meets another class -
i trying wrap content between class "product-category", class "content". , stop wrapping when meets class "end".
given markup:
<div class="product-category"> <p>lorem ipsum dolor sit amet.</p> <p>quae aliquid, ex enim eveniet!</p> <p>eligendi similique maxime, fugiat porro.</p> </div> <div class="product-category"> <p>lorem ipsum dolor sit amet.</p> <p>quae aliquid, ex enim eveniet!</p> <p>eligendi similique maxime, fugiat porro.</p> </div> <div class="end"> <p>lorem ipsum dolor sit amet.</p> </div>
what want make it:
<div class="content"> <div class="product-category"> <p>lorem ipsum dolor sit amet.</p> <p>quae aliquid, ex enim eveniet!</p> <p>eligendi similique maxime, fugiat porro.</p> </div> </div> <div class="content"> <div class="product-category"> <p>lorem ipsum dolor sit amet.</p> <p>quae aliquid, ex enim eveniet!</p> <p>eligendi similique maxime, fugiat porro.</p> </div> </div> <div class="end"> <p>lorem ipsum dolor sit amet.</p> </div>
i used .nextuntil, don't know how end it.
you can use .wrap
$('.product-category').wrap('<div class="content" />')
.product-category { background: lightblue; } .content { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="product-category"> <p>lorem ipsum dolor sit amet.</p> <p>quae aliquid, ex enim eveniet!</p> <p>eligendi similique maxime, fugiat porro.</p> </div> <div class="product-category"> <p>lorem ipsum dolor sit amet.</p> <p>quae aliquid, ex enim eveniet!</p> <p>eligendi similique maxime, fugiat porro.</p> </div> <div class="end"> <p>lorem ipsum dolor sit amet.</p> </div>
if have product-category
elements after end
element then
$('.end').prevall('.product-category').wrap('<div class="content" />')
Comments
Post a Comment