Создайте ряд li, дайте последнему имя класса «last» и поместите их в ul. - PullRequest
Новая
       16

Создайте ряд li, дайте последнему имя класса «last» и поместите их в ul.

2 голосов
/ 06 апреля 2010

как мне создать список li (они выглядят как простые поля с использованием css и float left) с определенными спецификациями:

  • 7 ликов подряд
  • строка является закрытым ul-тегом
  • в конце должно быть 8 строк ul's
  • последний li (седьмой) должен иметь class = "last".

это то, что я получил до сих пор, для создания li через массив (мне нужен массив, потому что мне нужны значения): 

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

Я ценю вашу помощь и ваше время, Николь

Ответы [ 3 ]

1 голос
/ 06 апреля 2010

Как-то так? 

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");

Выводит <ul> на каждые 7 элементов в массиве и добавляет класс last к последнему элементу в сгенерированных <li/>.

0 голосов
/ 06 апреля 2010

Я бы кешировал ваш селектор и впоследствии использовал селектор :nth-child(7n) (каждый седьмой ребенок), например: 

$(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");
});

Это предотвращает обнаружение <ul> для каждого цикла в функции.

Если вы плаваете ваши <li> элементы и задаете им ширину, а <ul> 7x эта ширина, они будут плавать в строках по 7, например: 

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

Лучше всего продемонстрировать демонстрацию плавающего подхода: вот краткая демонстрация того, что я имею в виду, здесь используется 1 <ul> вместо n <ul> элементов, намного проще :)

0 голосов
/ 06 апреля 2010 
$("#heatmap ul li:last").addClass('last');

должно сработать (поскольку jQuery может анализировать селекторы CSS3 +)

...