Consider we have a multi-level html list that looks like this:
<ul class="catalog"> <li> <ul> <li> <ul> <li>subcat subcat 1</li> <li>subcat subcat 2</li> <li>subcat subcat 3</li> </ul> </li> <li>subcat 2</li> <li>subcat 3</li> </ul> </li> <li> <ul> <li>subcat 4</li> <li>subcat 5</li> <li>subcat 6</li> </ul> </li> </ul>
I need to wrap into one div only <li>
tags (hamed "header 1", "header 2"... and all its children) which belong to first level of the list.
The result should be:
<ul class="catalog"> <div class="myWrapper"> <!-- Added by JQuery --> <li> <ul> <li> <ul> <li>subcat subcat 1</li> <li>subcat subcat 2</li> <li>subcat subcat 3</li> </ul> </li> <li>subcat 2</li> <li>subcat 3</li> </ul> </li> <li> <ul> <li>subcat 4</li> <li>subcat 5</li> <li>subcat 6</li> </ul> </li> </div> <!-- Added by JQuery --> </ul>
I tried wrap()
function but it did not work as expected
Any ideas how to do this job?
$('.catalog > li').wrapAll('<div class="wrapper"></div>');
但是,您都使用严重无效的HTML开头和结尾,因此您可能应该解决该问题,然后再问这个问题。
First, let's start with valid HTML, like this:
<ul class="catalog">
<li>header 1
<ul>
<li>subcat 1
<ul>
<li>subcat subcat 1</li>
<li>subcat subcat 2</li>
<li>subcat subcat 3</li>
</ul>
</li>
<li>subcat 2</li>
<li>subcat 3</li>
</ul>
</li>
<li>header 2
<ul>
<li>subcat 4</li>
<li>subcat 5</li>
<li>subcat 6</li>
</ul>
</li>
</ul>
Then you cap wrap them using .wrapAll()
, like this:
$(".catalog > li").wrapAll("<li><div class='something'><ul></ul></div></li>");
This results in valid HTML, like this:
<ul class="catalog">
<li>
<div class="something">
<ul>
<li>header 1
<ul>
<li>subcat 1
<ul>
<li>subcat subcat 1</li>
<li>subcat subcat 2</li>
<li>subcat subcat 3</li>
</ul>
</li>
<li>subcat 2</li>
<li>subcat 3</li>
</ul>
</li><li>header 2
<ul>
<li>subcat 4</li>
<li>subcat 5</li>
<li>subcat 6</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
You can test it out here , though you can probably get the effect you want with styling on the original <ul>
, display: block
for example.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.