Skip to content

Instantly share code, notes, and snippets.

@jikeytang

jikeytang/[ Javascript ] - 20140717-题目1

Created July 16, 2014 15:33
Show Gist options
  • Save jikeytang/1f1cf9806f8ceb98a8c6 to your computer and use it in GitHub Desktop.
Save jikeytang/1f1cf9806f8ceb98a8c6 to your computer and use it in GitHub Desktop.
Download ZIP
[ Javascript ] - 20140717-题目1
Raw
[ Javascript ] - 20140717-题目1
有这样一个需求，页面上有连续的li若干个，然后不间断的用ul去包裹，如何实现。
比如，有50个li，1-5个包一个ul，6-12包一个ul，13-30个包一个,31-50包一个。
PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```javascript
// you code
```
2. 粘贴代码时请使用shift+tab，缩进前面的空白。
@jikeytang
Copy link
Author

demo jsbin

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        ul{background: #f00;}
        ul li{list-style:none;}
        ul li{background: #ddd;}
        ul li:nth-child(even){background: #efefef;}
        .none{ display:none;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
</head>

<body style="font-size:18px">
<div id="div"></div>
<script type="text/javascript">
    var str = '';
    for(var i = 0; i < 50; i++){
        str += '<li>' + i + '</li>';
    }

    $('#div').html(str).find('li').slice(0,6).wrapAll('<ul></ul>').end()
            .slice(6,12).wrapAll('<ul></ul>').end()
            .slice(12,17).wrapAll('<ul></ul>').end()
            .slice(17).wrapAll('<ul></ul>');
</script>
</body>
</html>

@heqing0712
Copy link 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>[ Javascript ] - 20140717-题目1</title>
    <style type="text/css">
            ul { background: #f00;}
            ul li {list-style: none; }
            ul li {background: #ddd; }
            ul li:nth-child(even) {background: #efefef;}
    </style>
</head>

<body style="background:white;  font-size:18px">
    <div id="div"></div>
    <script type="text/javascript">

        (function () {

            var div = document.getElementById('div'),
                strs = '',
                listsB = [[0, 2], [3, 6], [7, 19], [20, 29], [30, 49]];
            for (var i = 0, j = 0; i < 50; i++) {
                strs += "<li>" + i + "</li>";
                if (i == listsB[j][1]) {
                    listsB[j++] = "<ul>" + strs + "</ul>";
                    strs = '';
                }
            }
            div.innerHTML = listsB.join('');

        }());


    </script>
</body>
</html>

@zjhsd2007
Copy link 

<html>
<head>
    <meta charset="utf-8">
    <title>[ Javascript ] - 20140717-题目1</title>
    <style type="text/css">
            ul { background: #f00;}
            ul li {list-style: none; }
            ul li {background: #ddd; }
            ul li:nth-child(even) {background: #efefef;}
    </style>
</head>

<body style="background:white;  font-size:18px">
    <div id="div"></div>
    <script type="text/javascript">
        (function(l,r){
            var re = [],index = 1,i=0,html = '<ul>',n;
            new Array(l+1).join('s').replace(/s/g,function(){ re.push('<li>'+(index++)+'</li>')});
            while(i < r.length){
                n = r[i]
                r[i++] = re.slice(n[0],n[1]+1).join('');
            };
            html += r.join('</ul><ul>') + '</ul>';
            document.getElementById('div').innerHTML = html;
        })(50,[[0, 2], [3, 6], [7, 19], [20, 29], [30, 50]]);
    </script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment