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的值也会给出预期值。

另一方面，如果我使用说$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);

Answer 2

您正尝试将li2附加到ulouter但它应该位于其父li的ulinner下

只需将您的最后一个附加声明更改为下面，它将起作用 $li2.appendTo( $('.ulouter').eq(i).find('li').eq(k).find('.ulinner'));

更改类选择器不处理附加项

2 个答案: