将ul元素分成三个div

时间：2017-04-06 05:31:40

标签： javascript jquery twitter-bootstrap

我动态获取ul元素，ul里面有大约18个li。一切都在一条线上。我怎么能通过jquery

分成3个div 

<ul>
<li>Sample1</li>
<li>Sample2</li>
<li>Sample3</li>
<li>Sample4</li>
<li>Sample5</li>
<li>Sample6</li>
<li>Sample7</li>
<li>Sample8</li>
<li>Sample9</li>
<li>Sample10</li>
</ul>

5 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
$(function(){
  var $bigList = $('#bigList'), group;
  while((group = $bigList.find('li:lt(3)').remove()).length){
    $('<ul/>').append(group).appendTo('body');
  }
});
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<ul id="bigList">
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
<li>w2way.com</li>
</ul>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

的index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<ul id="bigList">
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
<li>w2way</li>
</ul>
</body>
</html>

脚本

  $(function(){
  var $bigList = $('#bigList'), group;
  while((group = $bigList.find('li:lt(3)').remove()).length){
    $('<ul/>').append(group).appendTo('body');
  }
});

答案 1 :(得分：1)

根据评论您的需要<ul> <div class="col-md-6"> <li>sample1</li> </div> <div class="col-md-6"> <li>sample2</li> </div> </ul>您可以使用jQuery wrap函数： - 

$(function(){
 
  $('#list >li').wrap("<div class=\"col-md-6\">");
 
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<body>
   <ul id="list">
<li>Sample1</li>
<li>Sample2</li>
<li>Sample3</li>
<li>Sample4</li>
<li>Sample5</li>
<li>Sample6</li>
<li>Sample7</li>
<li>Sample8</li>
<li>Sample9</li>
<li>Sample10</li>
</ul>
</body>
</html>

<强>输出： 

        <ul id="list">
    <div class="col-md-6"><li>Sample1</li></div>
    <div class="col-md-6"><li>Sample2</li></div>
    <div class="col-md-6"><li>Sample3</li></div>
    <div class="col-md-6"><li>Sample4</li></div>
    <div class="col-md-6"><li>Sample5</li></div>
    <div class="col-md-6"><li>Sample6</li></div>
    <div class="col-md-6"><li>Sample7</li></div>
    <div class="col-md-6"><li>Sample8</li></div>
    <div class="col-md-6"><li>Sample9</li></div>
    <div class="col-md-6"><li>Sample10</li></div>
    </ul>

答案 2 :(得分：0)

尝试使用以下代码：

<强> HTML 

<ul>
    <li>Sample1</li>
    <li>Sample2</li>
    <li>Sample3</li>
    <li>Sample4</li>
    <li>Sample5</li>
    <li>Sample6</li>
    <li>Sample7</li>
    <li>Sample8</li>
    <li>Sample9</li>
    <li>Sample10</li>
</ul>

<强> SCRIPT 

$(function(){
    var items = $("ul>li");
    var wrapCount = 3;
    for (var i = 0; i < items.length; i+= wrapCount) {
        var slice = items.slice(i,i + wrapCount);      
        slice.wrapAll("<div class='liwrapper'></div>");
    }
});

Working Demo

答案 3 :(得分：0)

希望这有效：

var allLi = $('#list li');
for (var i = 0; i < allLi.length; i += 3) {
    $("#list li").slice(i, i + 3).wrapAll("<div class=\"col-md-6\">");
}

答案 4 :(得分：0)

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='http://rawgit.com/fzondlo/jquery-columns/master/jquery-columns-plugin.js'></script>
<style>
ul.cols2 {
  width: 50px;
  float: left;
}


</style>

<ul class='cols2'>
   <li>Sample1</li>
<li>Sample2</li>
<li>Sample3</li>
<li>Sample4</li>
<li>Sample5</li>
<li>Sample6</li>
<li>Sample7</li>
<li>Sample8</li>
<li>Sample9</li>
<li>Sample10</li>
</ul>

<div style='clear:both'></div>

＆＃13;
＆＃13; 
$('.cols2').cols(3);
＆＃13; 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//rawgit.com/fzondlo/jquery-columns/master/jquery-columns-plugin.js"></script>

<style>
ul.cols2 {
  width: 50px;
  float: left;
}


</style>

<ul class='cols2'>
   <li>Sample1</li>
<li>Sample2</li>
<li>Sample3</li>
<li>Sample4</li>
<li>Sample5</li>
<li>Sample6</li>
<li>Sample7</li>
<li>Sample8</li>
<li>Sample9</li>
<li>Sample10</li>
</ul>

<div style='clear:both'></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题