追加（）'到空（）'d ul

Question

我正在尝试清除其<ul>个孩子的<li>块，然后append()新<li>清空<ul>。

我（尝试）为此使用OOP JS，所以jQuery进一步启动代码是这样的：

$('#nav li a').click(function() {
    TutorGroupPoints.yearClick($(this).attr("id"));
});

此yearClick函数中的部分代码是：

$('#nav ul').empty();

for (var i = 0; i < this.Sorted.length; i++) {
    $('#nav ul').append('<li id="' + this.Sorted[i].id + '">' + this.Sorted[i].name + '</li>');
}

this.Sorted是一个完全填充的项目数组。

HTML看起来像这样：

<div id="nav">
    <h2>Tutor Groups</h2>
    <ul>
        <li><a class="year" href="javascript:void(0);" title="Year 9" id="9">Year 9</a></li>
        <li><a class="year" href="javascript:void(0);" title="Year 10" id="10">Year 10</a></li>
        <li><a class="year" href="javascript:void(0);" title="Year 11" id="11">Year 11</a></li>
        <li><a class="year" href="javascript:void(0);" title="Year 12" id="12">Year 12</a></li>
        <li><a class="year" href="javascript:void(0);" title="Year 13" id="13">Year 13</a></li>
    </ul>
</div>

---

当我点击其中一个#nav li锚时，它只会擦除<ul>而不会append()任何新的<li>。 但，如果我对empty发表评论，则新的<li>会正确附加到现有<li>。

我做错了吗？

---

修改

我已经包含了console.log个功能，似乎没有任何问题。

console.log的全文是：

[
    Object
    id: "12117"
    name: "11AB/Tp"
    __proto__: Object
    , 
    Object
    id: "12118"
    name: "11ABO/Tp"
    __proto__: Object ,
    Object , Object , Object , Object , Object , Object , Object ,  Object , Object , Object , Object , Object , Object
] compiler.php:32
<li id="12117">11AB/Tp</li> compiler.php:38
<li id="12118">11ABO/Tp</li> compiler.php:38
<li id="12119">11AN/Tp</li> compiler.php:38
<li id="12605">11DR/Tp</li> compiler.php:38
<li id="12626">11DST/Tp</li> compiler.php:38
<li id="12149">11JOR/Tp</li> compiler.php:38
<li id="12150">11LLU/Tp</li> compiler.php:38
<li id="12151">11MDA/Tp</li> compiler.php:38
<li id="12152">11ND/Tp</li> compiler.php:38
<li id="12153">11PD/Tp</li> compiler.php:38
<li id="12154">11RJ/Tp</li> compiler.php:38
<li id="12606">11SDI/Tp</li> compiler.php:38
<li id="12155">11ST/Tp</li> compiler.php:38
<li id="12607">11SW/Tp</li> compiler.php:38
<li id="12156">11VY/Tp</li> 

可以找到完整的代码here。我最初没有包含它，因为它使用特定于VLE的API调用，如果您不熟悉它们，往往会混淆问题。

---

提前致谢，

Answer 1

现在您已经显示了ACTUAL代码和ACTUAL HTML，我们可以看到您正在做的事情：

$('#nav').empty();

然后尝试追加到：

$('#nav ul')

但是，.empty()删除了ul，因此$('#nav ul')是一个空的jQuery对象（在您的页面中找不到任何内容），因此尝试追加它不会做任何事情。这也解释了为什么删除.empty()行可以使.append()正常工作。

变化：

$('#nav').empty();

为：

$('#nav ul').empty();