jquery - Replace selection with new content -

lets have list (but have table cells):

<ul>     <li>first</li>     <li class="middle">2</li>     <li class="middle">3</li>     <li class="middle">3</li>     <li>last</li> </ul> 

and want replace .middle elements 1 <li>middle</li>. using jquery's replacewith replace individual elements (as in this fiddle):

<ul>     <li>first</li>     <li>new content</li>     <li>new content</li>     <li>new content</li>     <li>last</li> </ul> 

but want this:

<ul>     <li>first</li>     <li>new content</li>     <li>last</li> </ul> 

is there native jquery method this, or have create new list (or new table row) in case, remove old , add new?

please note: elements sequential, in dom tree go 1 after (they group).

wrap them within <li>middle</li>, remove them:

$('li.middle').wrapall('<li>middle</li>').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>    <li>first</li>    <li class="middle">2</li>    <li class="middle">3</li>    <li class="middle">3</li>    <li>last</li>  </ul>