일련의 li를 하나의 div로 래핑하는 방법은 무엇입니까?

Question

나는 다음과 같은 HTML 코드를 가지고 :

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

모든 아이디어를 어떻게이 작업을 수행하려면 다음과 같은

<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를 사용하려면?

감사합니다.

편집 : 내 질문을 명확히하기 위해 미안 해요 : 하나의 ul에 일련의 li 태그가 있습니다. 그 중 일부를 하나의 div로 감싸려고합니다 (예 : a1을 a1에서 a5로 랩핑합니다. 한 div에서 a7). 내가 알고있는 것은 내가 포장하고자하는 li 태그가 그들의 ID로 연속적인 숫자를 갖는다는 것이다.

EDIT2 : ul 내부에 div가있는 것은 유효하지 않습니다. 내가이 질문을하는 이유는 jquery UI를 사용하여 ul을 두 개의 탭으로 나누고 싶습니다. 하나는 li a1에서 a5로, 다른 탭에서는 a6과 a7이 있습니다. jquery를 사용하여이 작업을 수행하는 방법을 알고 싶었으므로 html 코드를 수정할 수 없습니다.

Answer 1

귀하의 의견에 따르면,이 7 개의 탭을 두 개의 탭 (각각은 하위 탭이 있음)으로 분할하고자합니다. jQuery UI 탭을 사용한다고하셨습니다. $('#tabs').tabs()를 실행하면 두 개의 탭 레이아웃에이 변환됩니다

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

:

jQuery를 UI 탭은 다음과 같은 레이아웃을 사용합니다. HTML을 이와 같이 보이게 변환하면 작동 할 것입니다. 그런 다음 각 탭 안쪽에 다른 UL/div 설정으로 내부 탭을 추가하십시오. http://jsfiddle.net/cCjbC/1/는

그것은이 개 외부 탭을 만들고, 그런 다음, UL 소요를 분리 한 후 내부 탭과 같은 사람들을 추가 : 여기

당신은 당신이 원하는 것을 할 수있는 방법이다.

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> 

당신은 UL에 포장해야