Question

我有两个无序列表，一个名为ulPArent，另一个ulSub，当用户点击ulParent中的任何一个LI时，调用一个ajax请求，该请求传入所选的ulParent id并从数据库中返回与之关联的所有子类别，我然后尝试遍历子类别并将它们附加到下面的ulSub是HTML的外观

        <div class="col-md-4 margintop20">
            <ul class="nav nav-pills nav-stacked " id="ulParent" style="max-height: 300px;overflow: auto;">
                <li class="displaynone"></li>
                @foreach (var item in Model)
                {
                    <li data-grid-id="@item.CategoryId"><a href="#">@item.CategoryDescription <span class="glyphicon glyphicon-chevron-right"></span></a></li>
                }
            </ul>
        </div>
        <div class="col-md-4 margintop20">
            <ul class="nav nav-pills nav-stacked" id="ulSub" style="max-height: 300px;overflow: auto;">

            </ul>
        </div>

下面是我试图附加返回的子类别列表

的地方

  function getSubCategories(id) {

        var t;

        $.ajax({
            url: '@Url.Action("GetSubCategories", "Sell")',
            type: "POST",
            data: { "parentId": id },
            success: function (result) {
                if (result.success) {
                    var data = result.list;

                    $.each(data, function (i, item) {
                        t += '<li data-grid-id="' + item.CategoryId + '"><a href="#">' + item.CategoryDescription + '<span class="glyphicon glyphicon-chevron-right"></span></a></li>';
                    });

                    $("#ulSub ul li").append(t);

                }
                else {
                    $('#lblError').click();
                }
            }
        });
    }

但上面没有附加到ulSub？我发出警告，看看它有什么价值，下面是结果

undefined<li data-grid-id="26"><a href="#">Canvas & Giclee Prints<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="27"><a href="#">Drawings<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="28"><a href="#">Folk Art<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="29"><a href="#">New Media & Digital Art<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="30"><a href="#">Paintings<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="31"><a href="#">Photographs<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="32"><a href="#">Posters<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="33"><a href="#">Prints<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="34"><a href="#">Sculptures<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="35"><a href="#">Self-Representing Artists<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="36"><a href="#">Other<span class="glyphicon glyphicon-chevron-right"></span></a></li>

所以我可以看到LI正在建立起来，但我注意到这个词未定义，我不知道是什么导致了这个问题？

任何帮助都将不胜感激。

Answer 1

您的var t未使用空字符串初始化，因此javascript将默认值设置为 undefined ，为了克服此问题，您可以使用空字符串值初始化它：

var t='';

并且在您的成功功能中，您的选择器不正确，您有一个空白ul并且您正在将生成的lis附加到$("#ulSub ul li")，此时此刻不可用，因此您必须更改像这样的选择器：

$("#ulSub").append(t);

另一种追加方式是这样的：

success: function (result) {
   if (result.success) {
      var data = result.list,
          $ulSub = $("#ulSub"); // cache your Ul id here
      $.each(data, function (i, item) {
          $ulSub.append( // append directly here
            '<li data-grid-id="' + item.CategoryId + 
            '"><a href="#">' + item.CategoryDescription + 
            '<span class="glyphicon glyphicon-chevron-right"></span></a></li>');
      });
    } else {
      $('#lblError').click();
    }
}

Answer 2

你可以试试这个

if (result.success) {
                    var data = result.list;

                    $.each(data, function (i, item) {
                        document.getElementById("ulSub").innerHTML = '<li data-grid-id="' + item.CategoryId + '"><a href="#">' + item.CategoryDescription + '<span class="glyphicon glyphicon-chevron-right"></span></a></li>';
                    });

在jquery中将LI附加到UL

2 个答案: