Question

how do I create a list of li’s (they look like simple boxes by using css and float left) with the certain specifications:

• 7 li’s in a row
• the row is a closed ul-tag
• at the end there should be 8 rows of ul’s
• the last li (the 7th) should have the class=”last”.

this is what i got so far, to create li’s through an array (i need an array, because i need the values):

<script type="text/javascript">
    $(function () {
     $.each([39, 6, 1, 3, 5, 1, 1, 1, 1, 1, 1], function(index, value) { 
       $("#heatmap ul").append("<li class='box' value="+value+">"+index+"</li>"); 
     });
    });
</script>

I appreciate your help and your time,
Nicole

Answer 1

I’d cache your selector and use the :nth-child(7n) selector (every 7th child) afterwards, like this:

$(function () {
  var ul = $("#heatmap ul");
  $.each([39, 6, 1, 3, 5, 1, 1, 1, 1, 1, 1], function(index, value) { 
    ul.append("<li class='box' value="+value+">"+index+"</li>"); 
  });
  ul.children(":nth-child(7n)").addClass("last");
});

This prevents it finding that <ul> for every loop in the function.

If you float your <li> elements, and give them a width, and the <ul> 7x that width, they will float in rows of 7, like this:

li { float: left; width: 100px; }
ul { width: 700px }

Best to show a demonstration of the floating approach: here’s a quick demo of what I mean, this uses 1 <ul> instead of n <ul> elements, much simpler 🙂