Question

Here is my HTML sample:

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

I just want to wrap inactive data with dedicated span.
something like this:

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

I’ve tried a couple of things like these:

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

but unfortunately, it doesn’t work at all. How to make it work?

Answer 1

You can use the contents and filter method:

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

http://jsfiddle.net/YuZUp/

As @wirey correctly suggests you can also use the slice method;

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