javascript - 更改类选择器不适用于附加项目

Question

考虑以下不规则数组(实际数组更大，这仅用于说明):

var myarray = [
[
 ['k1', [] ],
 ['k2', ['l1', 'l2'] ],
 ['k3', [] ],
],

[
 ['k1', [] ],
 ['k2', ['l1', 'l2', 'l3'] ],
]

];

我正在尝试动态附加 <ul>和<li>内容取自 myarray 的元素现有<ul>使用以下嵌套循环的元素:

var $li1, $li2; 
for ( i = 0, count = 0; i < myarray.length; i++){
    for ( k = 0; k < myarray[i].length-1; k++){
        $li1 = $("<li><span>"+myarray[i][k][0]+"</span></li>");
        $li1.appendTo( $('.ulouter')[i] );
        count++;
        if (k == 0) continue; //do not append to first one
        $("<ul class='ulinner'></ul>").appendTo($('.ulouter > li')[count-1]);
        for ( l = 0; l < myarray[i][k][1].length; l++){
            $li2 = $( "<li><span>"+myarray[i][k][1][l]+"</span></li>" );
            $li2.appendTo( $('.ulinner').eq(count-1));
        }
    }
}

其中加载的html页面已包含一定数量的<ul class='ulouter'></ul>元素。

附加$("<ul class='ulinner'></ul>").appendTo($('.ulouter > li')[count-1]);工作正常，预期数量为 <ul class='ulinner'></ul>是在正确的地方创建的。然而，$li2.appendTo( $('.ulinner').eq(count-1));即使打印 count 的值，也不执行任何操作给我预期的值(value)。

另一方面，如果我使用 $li2.appendTo( $('.ulinner').eq(3));或任何其他数字，附加确实发生。但是当我使用变量 count 时并在循环内改变它的值，什么也没有发生，我一生都无法弄清楚为什么。尤其是count 确实在某些时候取值 3，因此它至少应该在某些情况下起作用。

请注意，使用 [ ]而不是.eq()没有什么区别。当使用不断变化的变量计数进行选择时，jQuery(使用普通的 javascript 选择器实际上会做同样的事情)是否有任何原因无法识别新附加的元素？我觉得我错过了一些明显的东西，而且我似乎无法在类似代码笔的环境中重现该行为。

编辑:参见http://codepen.io/anon/pen/rOaOOZ 第 24 行，控制台输出值 count-1在某个时刻达到 1。然后人们会期望 $li2.appendTo( $('.ulinner').eq(count-1));实现第二个.ulinner ，但事实并非如此。 但是，如果取消第 26 行的注释，则 count-1简单地替换为1，然后就可以了。这是怎么回事？

Answer 1

你可以试试这个。

JS Fiddle link for dynamic listing

示例代码:

    var html="";
function inside(events)
  {
    for (i in events) {

      if (typeof events[i] === 'object'){
          html+="<ul>";
        inside(events[i]);
        html+="</ul>";
      }else{
      html+="<li>"+events[i]+"</li>";
      }
    }
  }
  inside(myarray);
$("body").append(html);