首页 新闻 会员 周边

jquery应用,动态分割标签

0
悬赏园豆：10 [已解决问题] 解决于 2013-12-20 18:40

如下面代码:

 1 <dl class="dl" style="width:218px;">
 2 <dd>
 3     <a href="">国学</a>
 4     <a href="">国学</a>
 5     <a href="">国学</a>
 6     <a href="">国学</a>
 7     <a href="">国学入门</a>
 8     <a href="">国学著作</a>
 9     <a href="">国学</a>
10     <a href="">国学</a>
11     <a href="">国学</a>
12     <a href="">国学著作</a>
13 </dd>
14 </dl>

如果我dd这个原始的宽度超过了218px,那就自动分成几个dd元素,直到条件满足...

求指教...

sweetolive的主页 sweetolive | 初学一级 | 园豆：169
提问于：2013-04-09 12:38
< >
分享
最佳答案
0

我不知道你为什么要这么做！但是还是有办法解决的 :)

复制就可以看到效果 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DL- DT - DD</title>
    </head>
    <body>
        <dl id="ddWrapper" class="dl" style="width:218px;">
            <dd id="wrapper" style="margin:0;">
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
                 <a href="">国学</a>
            </dd>
        </dl>
    </body>
    <script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        (function(){
            window.cl = window.console? console.log: alert;
            var dd = $('#wrapper').css('margin',0);
            var datumLine = getOffsetLeft(dd);
            var units = dd.find('a');
            var perlineNum = 0;
            units.each(function(k,v){
                var unitMaringLeft = getOffsetLeft($(v));
                var unitOffsetLeftInWrapper = unitMaringLeft-datumLine;
                
                if(unitOffsetLeftInWrapper == 0 && k){
                    var headIndex = units.index(v);
                    perlineNum  = perlineNum? perlineNum : headIndex;
                    newDD(headIndex);
                }
            });

            function getOffsetLeft(e){
                return e.offset().left;
            }

            function newDD(index){
                var ddWrapper = $('#ddWrapper');
                var lastDDbeforeAppend = ddWrapper.children(':last');
                var newDDhtml = '<dd class="aWrapper" style="margin:0;"></dd>';
                ddWrapper.append(newDDhtml);

                lastDDbeforeAppend.find('a:gt('+(perlineNum-1)+')').appendTo($('#ddWrapper').find('dd').last());
            }
        })();        
    </script>
</html>
收获园豆：10
积跬步 | 菜鸟二级 |园豆：214 | 2013-04-30 13:50
其他回答(2)
0

overflow:auto

zhi++ | 园豆：487 (菜鸟二级) | 2013-04-10 20:58
0

这个没做过，不知道一楼的方法可以不

不负春光，努力生长 | 园豆：1382 (小虾三级) | 2013-04-10 21:43

应该不可以,我是想分割成多个<dd></dd>

支持(0) 反对(0) sweetolive | 园豆：169 (初学一级) | 2013-04-10 22:06
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。