Create a row of li's, give last one the classname "last" and put them all in an ul

Question

Hi,

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

$("#heatmap ul li:last").addClass('last');

should do the trick (as jQuery can parse CSS3+ selectors)

Answer 2

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 :)

Answer 3

$("#heatmap li").last().addClass('last');

Kind Regards

--Andy

Answer 4

Something like this I guess?

var values = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];

var $heatmap = $('#heatmap');

var currentRow = "";
for(var i = 0; i < values.length; i++) {
    currentRow += "<li>" + values[i] + "</li>";

    if(i % 7 == 0) {
        $heatmap.append("<ul>" + currentRow + "</ul>");
        currentRow = "";
    }
}

if(currentRow !== "") {
    $heatmap.append("<ul>" + currentRow + "</ul>");
}

$heatmap.find("ul li:last").addClass("last");

Outputs an <ul> per every 7 items in the array, and adds the last class to the last element in the generated <li/>'s