Цикл JQuery для отображения каждых шести элементов в новом неупорядоченном списке - PullRequest
Новая
       12

Цикл JQuery для отображения каждых шести элементов в новом неупорядоченном списке

0 голосов
/ 01 ноября 2009

Я немного новичок в мире jquery и мне было интересно: у меня есть объект JSON, который возвращает контент из базы данных. Как бы я перебрал эти элементы, чтобы отобразить только шесть элементов на каждый элемент с каждым добавляемым элементом в этом элементе в li, а затем построил новый элемент ul каждые шесть элементов, чтобы отобразить оставшиеся элементы в li? В основном я пытаюсь это:

  • пункт 1
  • пункт 2
  • пункт 3
  • пункт 4
  • пункт 5
  • пункт 6
  • пункт 7
  • пункт 8
  • пункт 9
  • пункт 10
  • пункт 11
  • пункт 12

и т.д ...

Ответы [ 5 ]

1 голос
/ 01 ноября 2009 
function buildLists(data, element) {

    var count = parseInt((data.length / 6) + (data.length % 6 == 0 ? 0 : 1), 10),
        html = "";

    for (var i = 0; i < count; i++) {
        html += "<ul>";
        for (var j = i; j < (6 + (6 * i)); j++) {
            html += "<li>" + data[j] + "</li>";
        }
        html += "</ul>";
    }

    element.append(html);
}
0 голосов
/ 01 ноября 2009

Я бы рекомендовал практиковать ненавязчивый Javascript . Одним из ключевых принципов является отделение разметки от дизайна; Вы хотите разбить представление на блоки по 6, но данные, которые вы представляете, по-прежнему представляют собой длинный непрерывный список. Если вы создадите несколько списков для представления этого, это может ввести в заблуждение любые сценарии, пытающиеся разобраться в содержании вашей страницы, или специализированные клиенты, такие как программы чтения с экрана.

Таким образом, я бы создал один список и использовал бы CSS, чтобы он выглядел как несколько блоков.

CSS: 

  .newBlock { margin-top: 1em; }

Javascript: 

var records = 
[ {name: "a"},{name: "b"},{name: "c"},{name: "d"},{name: "e"},{name: "f"},
  {name: "g"},{name: "h"},{name: "i"},{name: "j"},{name: "k"},{name: "l"},
  {name: "m"},{name: "n"},{name: "o"},{name: "p"},{name: "q"},{name: "r"}
]; // sample data, adapted from WesleyJohnson's example
var $ul = $("<ul/>").appendTo("body");
$.each(records, function(count, record) {
  var $li = $("<li/>").html(record.name).appendTo($ul);
  if (count % 6 == 0) $li.addClass("newBlock");
});

онлайн демо

0 голосов
/ 01 ноября 2009

Придумал решение с использованием функции jQuery ".each". Основной код для создания циклов и списков довольно мал. Примечание: это предполагает, что возвращаемый объект JSON имеет вложенные данные. 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var data = 
    [
        {value: 1},{value: 2},{value: 3},{value: 4},{value: 5},{value: 6},
        {value: 7},{value: 8},{value: 9},{value: 10},{value: 11},{value: 12},
        {value: 13},{value: 14},{value: 15},{value: 16},{value: 17},{value: 18}
    ];

    var $listReference;
    $.each(data, function(i, item) {
        if(i == 0 || (i) % 6 == 0){
            $listReference = $("<ul>");
            $("body").append($listReference);
        }
        $listReference.append($("<li>").text(item.value));
    });
});
</script>
</head>
<body>

</body>
</html>
0 голосов
/ 01 ноября 2009

Используется массив, но он должен указывать в правильном направлении. 

var items = [1,2,3,4,5,6,7,8,9,10,11,12,13];
var ul = $("<ul></ul>");
for(var i = 0; i < items.length; i++) {
  if(i % 6 == 0 && i > 0) {    
    console.log(ul.html()); // change this line - insert into the DOM wherever you'd like
    ul = $("<ul></ul>");
  }
  ul.append("<li>" + i + "</li>");
}
0 голосов
/ 01 ноября 2009

Моим ответом будет в основном ядро ​​JavaScript. 

    $(function() { //execute when DOM is ready
    var lists = '<ul>'; //start off list
    var nums = new Array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'); //add a few items to an array for demo

    var i = 1; //1-based count for "every six"
    var j = 0; //0-based count for array keys
    while (i <= nums.length){
       if(i%6 == 0){ //check if number is a multiple of 6
           if(i != nums.length){ 
            lists += '<li>'+nums[j]+'</li></ul><ul>';  
           }else{ //if this is the last array value, don't start a new ul
               lists += '<li>'+nums[j]+'</li></ul>';  
           }
       }else {
           lists += '<li>'+nums[j]+'</li>';   
       }
       i++; //go to next number
       j++; //go to next number
   }


      $('body').append(lists); //ad uls to page
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...