Question

我有一个包含父项和子项的动态创建菜单。我希望能够遍历子项以执行计数，然后在子项下附加带有计数的子项

我从SQL数据库中获取的数据被创建到菜单列表中，如下所示：

[{
  "ID": 9,
  "MenuText": "BMW",
  "ParentID": null,
  "Active": true,
  "List": [{
    "ID": 38,
    "MenuText": "M3",
    "ParentID": 9,
    "Active": true,
    "List": []
  }, {
    "ID": 39,
    "MenuText": "M3",
    "ParentID": 9,
    "Active": true,
    "List": []
  }]
}]

从这里，子项引用父项的ID：9

生成菜单列表后，我使用以下JavaScript将菜单构建到ul class =“menu”

$(document).ready(function() {

  $.ajax({
    url: 'MenuHandler.ashx',
    method: 'get',
    datatype: 'json',
    success: function(data) {
      data = JSON.parse(data);
      buildmenu($('.menu'), data);
      $('.menu').menu();

    }
  })

  function buildmenu(parent, items) {
    $.each(items, function() {
      var li = $('<li>' + this.MenuText + '</li>');
      if (!this.Active) {
        li.addclass('ui-state-disabled');
      }
      li.appendTo(parent);

      if (this.List && this.List.length > 0) {
        var ul = $('<ul></ul>');
        ul.appendTo(li);
        buildmenu(ul, this.List);
      }
    });
  }

}

这是我当前生成菜单的方式：宝马＆gt; M3 M3

这就是我希望我的菜单生成的方式： BMW（2）＆gt; M3（2）

我尝试针对菜单列表项测试一个简单的JavaScript for循环，但是我的警报消息在每个循环中抛出[object Object]。

setTimeout(function count() {
  var n = $('.menu li')
  for (var i = 0; i < n.length; i++) {
    alert(n)
  }
}, 3500);

Answer 1

创建countOccurance函数来计算和测试是否已经添加了menuText

$(document).ready(function() {

  $.ajax({
    url: 'MenuHandler.ashx',
    method: 'get',
    datatype: 'json',
    success: function(data) {
      data = JSON.parse(data);
      buildmenu($('.menu'), data);
      $('.menu').menu();

    }
  })

  var lastliElement;// if more occurance append to the last element

  function buildmenu(parent, items) {
        var tabOccurance = [];
      $.each(items, function () {
            var nbOccurnace = countOccurance(this.MenuText,items);
          // search if occurance text alredy exist
          if(tabOccurance.indexOf(this.MenuText) == -1 ){ // this doesn't work on ecma6 and above
            var length = this.ParentID == null ? this.List.length : nbOccurnace;
            var li = $('<li>' + this.MenuText + '('+length+')' + '</li>');
            lastliElement = li;
            if (!this.Active) {
              li.addclass('ui-state-disabled');
            }

            li.appendTo(parent);

          }
          if(nbOccurnace>1) 
            tabOccurance.push(this.MenuText);

            if (this.List && this.List.length > 0) {

            var ul = $('<ul></ul>');
            ul.appendTo(lastliElement);
            buildmenu(ul, this.List);
          }
      });
  }
  // to conunt occurance of menuText
  function countOccurance(MenuText,list){
     var count = 0
     $.each(list, function () {
            if(this.MenuText === MenuText)
            count++;
     });
     return count;
  }
});

这是一个Fiddle。

Answer 2

要根据您的示例数据显示BMW (2) > M3，可以使用data[i].List.length：

function buildmenu(parent, items) {
    $.each(items, function () {
        var li = $('<li>' + this.MenuText +'(' + this.List.length + ')</li>');

    });

工作小提琴：https://jsfiddle.net/8cooqye8/1/

循环浏览菜单列表项并将其添加

2 个答案: