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