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 选择器实际上做同样的事情)在使用不断变化的变量计数选择时无法识别新附加的元素有什么原因吗？我觉得我遗漏了一些明显的东西，而且我似乎无法在类似 codepen 的环境中重现该行为。

编辑:参见 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);