jquery와 동적으로 생성되는 UL LI 조합

Question

전체 요구 사항을 먼저 설명해 드리겠습니다.

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

<style type="text/css"> 
    #container { width:960px; overflow:hidden; margin:0 auto; border:1px dotted #CCC;} 
    #container ul { padding:0; margin:0; white-space:nowrap; } 
    #container li { list-style-type:none; display:inline-block; text-align:center; padding:0 15px; line-height:32px; margin:0; } 
    * html #container li { display:inline; text-align:center; } /* IE6 hack */ 
    * html #container { padding-bottom:17px;} /* IE6 hack */ 
    *:first-child+html #container li { display:inline; } /* IE7 hack */ 
    *:first-child+html #container { padding-bottom:17px; overflow-y:hidden; } /* IE7 hack */ 
</style>  

지금, 우리는 LI와 상단 탐색 할 필요가 - 디스플레이 :

<div id="container"> 
    <ul> 
    <li style="background-color:#CCC">One</li> 
    <li style="background-color:#CCC">Two</li> 
    <li style="background-color:#CCC">Three</li> 
    <li style="background-color:#CCC">Four</li> 
    <li style="background-color:#999">Five</li> 
    <li style="background-color:#666">Six</li> 
    <li style="background-color:#000; color:#FFF;">Seven</li> 
    <li style="background-color:#000; color:#FFF;">Eight</li> 
    </ul> 
</div>  

CSS는 다음과 같다 인라인 속성을. 조건은 모든 시나리오에서 메뉴가 너비의 100 %를 차지합니다. 따라서 각 메뉴 항목에는 동일한 너비가 포함됩니다. 하나의 메뉴 항목이 있으면 100 % 너비를 포함해야합니다.

는 다음 코드에서와 동일한을 달성했다 :

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var w = 0; 
     var tw = 960; 
     var cal_width =0; 
     w = $('li').size(); 
     cal_width = (tw/w)-30 + "px"; 
     $("ul > li").css({"width": cal_width}); 
    }); 
</script>  

각 LI는 동일한 폭을 얻을 것이다.

이제 우리는 한 번에 상단 네비게이션에 최대 7 개의 항목이 나타날 수있는 것처럼해야합니다. 따라서 메뉴 항목이 한계 값 7을 초과하면 실행시 별도의 UL이 생성되어 8th, 9th &과 같은 항목을 래핑합니다. 7. 다음 큰 여분의 LI 항목을 래핑하는

행의 수를 계산함으로써, 우리는 JQuery와 루프에 대한이 실행에 UL 태그를 생성하기 위해 실행할 수있는

누군가가이 문제 좀 도와 수 있습니까?

Answer 1

초기 DIV의 HTML을 다시 작성할 수는 있지만 가장 좋지는 않지만 작업을 수행하고 클래스를 적용하기 전에 실행하십시오.

var childCount = $("#container li").length; 
if (childCount > 7) { 
    var i=1; 
    newHtml = ""; 
    $.each($("#container li"), function() { 
     if (i == 1) { 
      newHtml +="<ul>"; 
     } 
     newHtml += "<li>" + this.innerHTML + "</li>"; 
     if (i >= 7) { 
      newHtml +="</ul>"; 
      i=1; 
     } else { 
      i++; 
     } 
    }); 
    } 
$("#container").html(newHtml) 
});