2014-09-10 5 views
1

간단한 탭 메뉴를 작성해야합니다. 문제는 내가 그런 somethink를 생성해야한다는 것입니다 ...div에서 목록으로 요소 복제

<ul id="menu"> 
    <li class="First">First</li> 
    <li class="Second">Second</li> 
    <li class="Third">Third</li> 
</ul> 

... 그

<div class="someclass"> 
    <li class="First">First</li> 
    <p>text</p> 
    </div> 
<div class="someclass"> 
    <li class="Second">Second</li> 
    <p>text</p> 
    </div> 
<div class="someclass"> 
    <li class="Third">Third</li> 
    <p>text</p> 
    </div> 

같은 somethink에서 내가 ...

JS 내 순수한 지식이 broblem를 해결하기 위해 시도
<div id="PutAfter"> 
<ul id="menu"> 
    <li id="m">First</li> 
    <li id="m">Second</li> 
    <li id="m">Third</li> 
</ul> 
    <div style="display:none"> 
<div class="someclass"> 
    <li id="m">4</li> 
    <p>text</p> 
    </div> 
<div class="someclass"> 
    <li id="m">5</li> 
    <p>text</p> 
    </div> 
    <div class="someclass"> 
    <li id="m">6</li> 
    <p>text</p> 
    </div> 
    </div> 

및 간단한 스크립트

$(document).ready(function(){ 
    $('#4').clone().insertAfter($('#m3')); 
    $('#5').clone().insertAfter($('#4')); 
    $('#6').clone().insertAfter($('#5')); 
}); 

당신이 볼 수 있듯이 큰 문제가 있습니다 - 아이디에 중복이 있습니다. (나는 <li> 요소 i의 ID를 생성 할 수 없습니다. 왜냐하면 header.phtml 파일에 메뉴로드가 있고 <div> 내용이 footer.phtml에 들어 있기 때문입니다. 그게 왜 내가 PHP를 사용하여 메뉴 항목을 얻을 수 없어 - standart에 대해 잊어 버려 "get DB에서"자사의 젠드 ...). 어쩌면 내가 생성하거나 그냥 "배열"좀해야합니까?

나는 정말 도움이 될 것입니다!

+1

중복 ID의는,리스트 요소는 DIV의 자식이 될 수 없습니다 문제의 이상을 것 같다, 그래서 마크 업 아마 당신은 대부분의 경우에 브라우저로, 그것이 생각조차하지 않습니다 그런 것들을 고치려고 할 것입니다. – adeneo

+0

이중화 된 ID에 대해 말하기 ... 문제가'li'의 개수가 다를 수 있다면 왜 ID 대신 클래스를 설정하지 않을까요? – LcSalazar

답변

0

당신은 body에 다음 추가, 모든 li.someclass 내부 요소를 선택을 복제하고 새로 ul 생성에 추가 할 수 있습니다.

Fiddle.

$(document).ready(function() 
{ 
    var ul = $('<ul>', { id: "menu" }); 
    ul.append($('.someclass li').clone()); 
    $("body").append(ul); 
});