jQuery - 包装文本元素的特定部分

Question

这是我的HTML示例：

<td class="prod ">
  ACTIVE_server
  <br/> inactivename_1
  <br/> inactivename_2
  <br/> inactivename_3
  <br/>
</td>

我只想用专用的span来包装非活动数据。 像这样的东西：

<td class="prod ">
  ACTIVE_server
  <br/>
  <span class="inactive">
           inactivename_1
           <br/>
           inactivename_2
           <br/>
           inactivename_3
           <br/>
       </span>
</td>

我尝试过这样的事情：

$('td[class*="prod"]>br').after('<span id="inactiveServer">');

$('td[class*="prod"]>br').wrap('<span id="inactiveServer">');

$('td[class*="prod"]>br').nextUntil('<br>').wrapAll('<span class="inactiveServer">');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="prod ">
  ACTIVE_server
  <br/> inactivename_1
  <br/> inactivename_2
  <br/> inactivename_3
  <br/>
</td>

但不幸的是，它根本不起作用。如何使它工作？

Answer 1

您可以使用contents和filter方法：

$('td.prod').contents().filter(function(i){
    if (i > 1) return this
}).wrapAll('<span class="inactiveServer"/>');

http://jsfiddle.net/YuZUp/

正如@wirey正确建议您也可以使用slice方法;

$('p.prod').contents().slice(1).wrapAll('<span class="inactiveServer"/>');