Having Issue on Wrapping li list in a Div indepenedntly

Question

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

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

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

is there any way that I can add open and closing tag before each item?

Do you want to wrap only the outer LI with the DIV? Or are you trying to wrap all the LIs? — jwatts1980, May 26 '16 at 15:51

score 2 · Answer 1 · edited May 23 '17 at 10:28

2

If this is what you want to do (I'm not sure):

<ul>
    <div><li></li></div>
</ul>

This is not valid HTML.
Explanation here: Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }

edited May 23 '17 at 10:28

Community

1
1

answered May 26 '16 at 15:52

Louys Patrice Bessette

33,375
6
36
64

Thanks Louys, you are right. so what is the solution then? – Behseini May 26 '16 at 15:53
Depends on what you really want to do... But if it is only to add the class .new, You shoul use addClass on li instead of wrapping with a div. – Louys Patrice Bessette May 26 '16 at 15:55

Having Issue on Wrapping li list in a Div indepenedntly

1 Answers1