Заменить выбор с новым содержанием

Question

Допустим, у меня есть список (но у меня есть ячейки таблицы):

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

, и я хочу, чтобы заменить все .middle элементы с одним <li>middle</li>. Использование JQuery-х replaceWith бы заменить все отдельные элементы (как в this fiddle):

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

, но я хочу это:

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

Есть ли нативный метод JQuery, чтобы сделать это, или я должен создать новый список (или новую строку таблицы) в моем случае, чем удалить старые и добавить новые?

Обратите внимание: все элементы являются последовательными, в дереве DOM они идут один за другим (они представляют собой группу).

Answer 1

Заверните их все в <li>middle</li>, а затем удалить их:

$('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>

Answer 2

Использование removeClass(), :not() и :first

$('.middle:not(:first)').remove(); 
 
$('.middle').removeClass('middle').text('New content');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>

Answer 3

Попробуйте

$('.middle').each(function() { 
    if ($('.middle').length == 1) { 
     $(this).replaceWith('<p>New content</p>'); 
     return; 
    } 
    $(this).remove(); 
}); 

Answer 4

replaceWith принимает параметр функции - как таковой, вы можете заменить первое вхождение найденного элемента, и отбросить все остальное:

$(".middle").replaceWith(function(index){ return index == 0 ? "<li>new content</li>" : " "});