关闭<ul>每8 <li>

时间:2016-03-21 21:19:23

标签: javascript jquery

我不知道如何关闭元素<ul>每8个元素<li>。有人可以帮帮我吗?

$.getJSON('https://www.googleapis.com/youtube/v3/search?key=AIzaSyDwHNKX0Ti4HYrJZ9Mf-mMIZxVU5JwiLVI&channelId=UCxRGbboDO9bCYd651YpIZuw&part=snippet,id&order=date&maxResults=50',
  function(data){
    var x = 0;
    var breakList = '';

    $.each(data.items, function(i,item){
      x++;

      if(x == 8){ //break ul if is 8
        x =0;
        breakList = 'break';
      }

      $('ul').append('<li class='+breakList+'>' + item.id.videoId + '</li>');

      breakList = '';
    });     

});

我在代码中试过了<ul>,但我不能。

2 个答案:

答案 0 :(得分:1)

您可以使用%运算符每8个项目创建一个新列表。

这样的事情会起作用:

$.getJSON('https://www.googleapis.com/youtube/v3/search?key=AIzaSyDwHNKX0Ti4HYrJZ9Mf-mMIZxVU5JwiLVI&channelId=UCxRGbboDO9bCYd651YpIZuw&part=snippet,id&order=date&maxResults=50',
function(data){
var counter = 0;
$.each(data.items, function(i,item){
    if(i % 8 == 0) {
    counter++;
    $('#youTubeContainer').append('<ul id="list'+counter+'"></ul>');
}
  $('ul#list'+counter).append('<li>' + item.id.videoId + '</li>');

});     

});

此外,您可能希望为列表指定一个ID,并将结果附加到特定ID。

请参阅此处的工作示例:https://jsfiddle.net/aghzznwx/2/

希望有所帮助!

答案 1 :(得分:0)

您可以使用Array.prototype.slice()复制data数组;包含while参数Array.prototype.splice()的{​​{1}}循环,用于删除0, 80之间的索引,而项目保留在复制的数组中

8
var data = $.map(Array(27), function(item, index) {
  return {"id":{"videoId":index}}
});

var copy = data.slice(0);

while (copy.length) {
  var curr = copy.splice(0, 8);
  var ul = $("<ul>", {css:{border:"2px solid olive"}});
  curr.forEach(function(item) {
    ul.append($("<li>", {
      html: item.id.videoId
    }))
  });
  $("body").append(ul);
}

相关问题