javascript - JSON Split - 在间隔期间将数组文本放入 li 中

Question

我的任务是获取 jsonObj 中的 3 个不同颜色列表并将它们放入 <ul> 。它们每秒只能出现一个。为了 fiddle 的缘故，我每 5 秒放一次。

我还没有到达第二个或第三个颜色列表，因为虽然我可以列出我的第一个颜色列表，但它们附加在我为它们创建的 listItem 之外。它吐出的代码是:

var jsonObj = '{"one":["red","green","blue"], "two":["red","green","blue"], "three":["orange","purple","hotpink"]}',
  object = JSON.parse(jsonObj),
  cOne = object.one,
  cTwo = object.two,
  cThree = object.three,
  i = 0,
  timer;

$('body').append('<ul/>');

timer = setInterval(function() {

  $.each(cOne, function() {
    var list = $('body ul'),
      listItem = $(list).append('<li>'),
      html = $(listItem).append(cOne[i]);

    if (i < cOne.length) {
      i++;
      $(cOne[i]).split("");
      list.append(html);

    } else if (i = cOne.length) {
      i = 0;
    }

  });

}, 5 * 1000);

timer;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

也可通过 https://jsfiddle.net/ep76ba3u/ 获取

它的作用:

<ul>
<li></li>
"red"
<li></li>
"blue"
</ul>

它应该是什么样子:

<ul>
<li>red</li>
<li>blue</li>
</ul>

我尝试过重新安排一切。我尝试过使用wrapper、innerWrap。我尝试过仅使用 text() 和其他一些方法。我凌晨 3 点开始工作，现在已经凌晨 5 点了……脑子都炸了。任何关于如何插入这一行动的想法都值得赞赏。

Answer 1

您无法附加部分 html，这就是为什么 $(list).append('<li>')立即关闭<li> .

并且您不应该在循环中修改标记。它令人讨厌且性能不佳。

检查一下您的代码的这种方法:

var jsonObj = '{"one":["red","green","blue"], "two":["red","green","blue"], "three":["orange","purple","hotpink"]}',
  object = JSON.parse(jsonObj),
  iteration = 0,
  timer;

$('body').append('<div id=container>');

//a few utilities, because I don't want to repeat myself all over the place:
var string = value => value == null ? "" : String(value);
var wrapInNode = nodeName => value => `<${nodeName}>${ string(value) }</${nodeName}>`;

//here I create a few utility-methods that will build my markup:
var li = wrapInNode('li');
var ul = wrapInNode('ul');
var header = wrapInNode('h4');

timer = setInterval(function() {
  //building the complete markup and adding it at once
  var blocks = [],
    //how many rows should I show in this iteration
    numRowsLeft = ++iteration,
    //getting this result is just a nice sideeffect of using `every()` instead of `forEach()` 
    //to short-curcuit the loop
    done = Object.keys(object)
    .every(function(key) {
      //this line makes the title to be added with as a distinct iteration and not with the first item, 
      //check out what happens when you remove it
      --numRowsLeft;

      var rows = object[key]
        //shorten the Array to numRowsLeft, if necessary
        .slice(0, numRowsLeft)
        //wrap each item in a li-node with my predefined utility-function
        .map(li);

      numRowsLeft -= rows.length;

      //building the markup for this block
      blocks.push(header(key) + ul(rows.join("")));

      //here I'm short circuiting the loop. to stop processing the other keys on Object
      return numRowsLeft > 0;
    });

  $('#container').html(blocks.join(""));

  if (done) {
    clearInterval(timer);
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

并始终显示标题，而仅添加点:

var jsonObj = '{"one":["red","green","blue"], "two":["red","green","blue"], "three":["orange","purple","hotpink"]}',
  object = JSON.parse(jsonObj),
  iteration = 0,
  timer;

$('body').append('<div id=container>');

var string = value => value == null ? "" : String(value);
var wrapInNode = nodeName => value => `<${nodeName}>${ string(value) }</${nodeName}>`;
var li = wrapInNode('li');
var ul = wrapInNode('ul');
var header = wrapInNode('h4');

timer = setInterval(function() {
  var numRowsLeft = ++iteration,
    blocks = Object.keys(object)
    .map(function(key) {
      var rows = object[key]
        .slice(0, numRowsLeft)
        .map(li);

      numRowsLeft -= rows.length;
      return markup = header(key) + ul(rows.join(""));
    });

  $('#container').html(blocks.join(""));

  // If I'd had room to show even more rows, then I' done
  if (numRowsLeft > 0) {
    clearInterval(timer);
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>