CODEWITHSUNDEEP
javascriptjqueryhtml
NeedH8
NeedH8

Reputation: 482

Create the list with limited elements inside

I need to create ul with a limit of 5 li's inside. If it goes more then 5 elements - create new ul with the same limitations. And so on and on. Here is the start point I made: 

$(function(){
var $container = $('.container'),
		el = 5,
		i;  
	newUl = $('<ul />')
		for(i=0; i < el; i++){
			$container.append(newUl)
			$('<li />', { html : i }).appendTo(newUl)			
		}
})
* {
  box-sizing: border-box;
}

body {
  background: #f2f2f2;
}

.wrapper {
  display: table;
  margin: 0 auto;
  padding: 10px;
  max-width: 600px;
  width: 100%;
  height: 100vh;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.wrapper .container {
  display: table-cell;
  vertical-align: bottom;
}
.wrapper ul {
  background: #c0c0c0;
  border: 1px solid #333;
  font-size: 0;
}
.wrapper ul:nth-of-type(odd) {
  direction: rtl;
}
.wrapper ul li {
  display: inline-block;
  font-size: 16px;
  width: 20%;
  padding: 10px;
  border: 1px solid #333;
  text-align: center;
  direction: rtl;
}

.status {
  position: fixed;
  left: 0;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"> 
	<div class="container"> 
		
	</div>
</div>
<div class="status"></div>

Any advices how to do this?

Upvotes: 1

Views: 46

Answers (2)

David784
David784

Reputation: 7464

You can use the modulus operator % to determine when you have reached the max, and then you need to create a new jQuery for your new ul, and append it.

$(function(){
  var $container = $('.container'),
   el = 10,
   max = 5,
   i;  
  var newUl;
  for(i=0; i < el; i++){
   if(i%max==0) {
     newUl = $('<ul/>');
     $container.append(newUl);
   }
   $('<li />', { html : i }).appendTo(newUl)			
  }
});
* {
  box-sizing: border-box;
}

body {
  background: #f2f2f2;
}

.wrapper {
  display: table;
  margin: 0 auto;
  padding: 10px;
  max-width: 600px;
  width: 100%;
  height: 100vh;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.wrapper .container {
  display: table-cell;
  vertical-align: bottom;
}
.wrapper ul {
  background: #c0c0c0;
  border: 1px solid #333;
  font-size: 0;
}
.wrapper ul:nth-of-type(odd) {
  direction: rtl;
}
.wrapper ul li {
  display: inline-block;
  font-size: 16px;
  width: 20%;
  padding: 10px;
  border: 1px solid #333;
  text-align: center;
  direction: rtl;
}

.status {
  position: fixed;
  left: 0;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"> 
	<div class="container"> 
		
	</div>
</div>
<div class="status"></div>

Upvotes: 1

John Smith
John Smith

Reputation: 601

I'm not quite following your example, so forgive me that I've just started fresh here. The first loop and the 12 on line 2 is just to generate a list of fake data to work with. Test it with 0, less than 5, multiples of 5, and 1+ a multiple of 5 just to make sure it works.

var items = [];
for(var i=0; i<12; i++) {
    items.push("item " + i.toString());
}
var subItems = items.splice(0, 5);
var div = $("<div>").get(0);
while(subItems.length > 0) {
    var ul = $("<ul>").get(0);
    div.appendChild(ul);
    for(var i=0; i<subItems.length; i++) {
        ul.appendChild( $("<li>").text(subItems[i]).get(0) );
    }
    subItems = items.splice(0, 5);
}

You can paste this into the console to see the results. Just add console.log(div) at the end.

This will create a div with n number of ul tags, each having 5 li's (or less depending on the data)

Change line 6 to point to your div tag. And I'm not sure we can tell from your example where the data is supposed to come from so you'll need to change items and line 11 accordingly.

Upvotes: 1

Related Questions