Question

I have the following html code:

<ul>
 <li id="a1">content</li>
 <li id="a2">content</li>
 <li id="a3">content</li>
 <li id="a4">content</li>
 <li id="a5">content</li>
 <li id="a6">content</li>
 <li id="a7">content</li>
</ul>

I want to use jquery to wrap these li tags into one div, same as:

<ul>
 <div id="list1">
  <li id="a1">content</li>
  <li id="a2">content</li>
  <li id="a3">content</li>
  <li id="a4">content</li>
  <li id="a5">content</li>
 </div>
 <div id="list2">
  <li id="a6">content</li>
  <li id="a7">content</li>
 </div>
</ul>

Any ideas how to do this?

Thank you!

EDIT: sorry for the confusion, to clarify my question: I have a series of li tags in one ul, i want to wrap some of them into one div (for example, wrap a1 to a5 in one div, a6 to a7 in one div). What i know for sure is that the li tags that I want to wrap have consecutive numbers as their ids.

EDIT2: I realized that it’s not valid to have divs inside a ul. The reason I’m asking this question is that I want to use jquery ui tabs to break the ul into two tabs, one having li a1 to a5 in it, a6 and a7 in the other tab. I cannot modify the html code so I wanted to know how to do this using jquery

Answer 1

According to your comment, you want to split these 7 tabs into two tabs, each with sub tabs. You said you’re using jQuery UI tabs.

jQuery UI tabs uses the following layout:

<div id="tabs">
   <!-- These are the tabs -->
   <ul>
     <li><a href="#tab-A">Tab A</a></li>
     <li><a href="#tab-B">Tab B</a></li>
   </ul>
   <!-- This is your tab content -->
   <div id="tab-A">
     This is tab A
   </div>
   <div id="tab-B">
     This is tab B
   </div>
</div>

Running $('#tabs').tabs() will convert this into a two-tabbed layout. You just need to convert your HTML to look like this, and then it’ll work. And then inside each tab, just have another UL/div setup to add inner-tabs.

Here is how you can do what you want: http://jsfiddle.net/cCjbC/1/

It makes 2 outer tabs, then takes your ul, splits it and then adds those as inner tabs.