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

Question

这是我的 HTML 示例：

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

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

<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

您可以使用contentsandfilter方法：

$('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"/>');