Как обернуть серию li в один div?

Question

У меня есть следующий HTML-код:

<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> 

Я хочу использовать JQuery, чтобы обернуть эти Li теги в один DIV, так же, как:

<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> 

Любые идеи, как это сделать?

Спасибо!

EDIT: извините за недоразумение, чтобы уточнить мой вопрос: у меня есть серия тегов li в одной ul, я хочу обернуть некоторые из них в один div (например, оберните a1 в a5 в один div, a6 до a7 в одном div). Я точно знаю, что теги li, которые я хочу обернуть, имеют последовательные номера в качестве их идентификаторов.

EDIT2: Я понял, что недействительно иметь divs внутри ul. Причина, по которой я задаю этот вопрос, заключается в том, что я хочу использовать вкладки jquery ui, чтобы разбить ul на две вкладки: одна с линией от a1 до a5, a6 и a7 на другой вкладке. Я не могу изменить html-код, поэтому я хотел бы знать, как это сделать, используя jQuery

Answer 1

Согласно вашему комментарию, вы хотите разбить эти 7 вкладок на две вкладки, каждая из которых имеет подкладки. Вы сказали, что используете вкладки пользовательского интерфейса jQuery.

вкладок JQuery UI использует следующую схему:

<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> 

Запуск $('#tabs').tabs() преобразует это в два-закладками макета. Вам просто нужно преобразовать свой HTML, чтобы выглядеть так, и тогда это сработает. А затем внутри каждой вкладки просто нужно установить еще одну настройку UL/div для добавления внутренних вкладок.

Вот как вы можете сделать то, что вы хотите: http://jsfiddle.net/cCjbC/1/

Это делает 2 внешние вкладки, а затем берет свой ул, расщепляет его, а затем добавляет их в качестве внутренних вкладок.

Answer 2

Я точно не знаю, что вы здесь задаете, но почему бы не добавить теги UL и обернуть их с помощью DIV?

<div id="list"> 
<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> 
</ul> 
</div> 

Answer 3

Выполните следующий код:

$("ul") 
    .prop("id","list1") 
    .after("<ul id='list2'/>"); 

$("#a6") 
    .nextAll() 
    .andSelf() 
    .appendTo("#list2"); 

И это превратит ваш сингл <ul> в два <ul> походит, так:

<ul 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> 
</ul> 
<ul id="list2"> 
    <li id="a6">content</li> 
    <li id="a7">content</li> 
</ul>