Demo

I am trying to wrap each li in a div .new which works fine when the li doesn't have any children <ul><li></li></ul>.

but when it is in following format

<li>XRP 1 <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> <li>XRP 2</li> <li>XRP 3</li>

It wraps lis in new in the hierarchy several times. is there any way that I can add open and closing tag before each item?

$( "li" ).wrap( "<div class='new'></div>" );

.new{ border:1px solid #ccc; margin:5px; }