Question

首先让我向大家介绍一下整个要求。

我有以下HTML代码：

<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如下所示：

<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进行顶部导航 - 显示：内联属性。条件是，在任何情况下，菜单将覆盖宽度的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以包装类似于第8，第9和第8项的项目。等等。

通过计算行数，我们可以在jquery中运行for循环，在运行时生成UL标记，以包装大于7的额外LI项。

有人可以帮我解决这个问题吗？

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)
});

使用jquery动态生成UL LI组合

1 个答案: