Javascript 循环浏览菜单列表项并将它们相加

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

我从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”中

$（文档）.ready（函数（）{
$.ajax({
url:'MenuHandler.ashx'，
方法：“get”，
数据类型：“json”，
成功：功能（数据）{
data=JSON.parse（数据）；
构建菜单（$（'.menu'），数据）；
$（'.menu'）.menu（）；
}
})
功能构建菜单（父项、项）{
$.each（项、函数（）{
var li=$（'
'+this.MenuText+'
'）；
如果（！this.Active）{
li.addclass（'ui-state-disabled'）；
}
li.附属于（母公司）；
if（this.List&&this.List.length>0）{
var ul=$（“
”）；
ul.附录（li）；
构建菜单（ul，this.List）；
}
});
}
}

以下是当前生成“我的菜单”的方式： 宝马>M3 M3

这是我希望我的菜单生成的方式： 宝马（2）>M3（2）

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

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

setTimeout（函数计数（）{
变量n=$（'.menu li'）
对于（变量i=0；i

根据您的示例数据，可以使用

数据[i]。列表。长度

：

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

    });

功能构建菜单（父项、项）{
$。每个（项目、功能（）{
var li=$（“
”+this.MenuText+”（“+this.List.length+”）
”；
});

---

工作小提琴：

根据您的示例数据，要使事情看起来像

BMW（2）>M3

，您可以使用

数据[i]。列表。长度

：

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

    });

功能构建菜单（父项、项）{
$。每个（项目、功能（）{
var li=$（“
”+this.MenuText+”（“+this.List.length+”）
”；
});

---

工作小提琴：

创建

countOccurance

函数，用于计数和测试是否已添加菜单文本

$(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;
  }
});

$（文档）.ready（函数（）{
$.ajax({
url:'MenuHandler.ashx'，
方法：“get”，
数据类型：“json”，
成功：功能（数据）{
data=JSON.parse（数据）；
构建菜单（$（'.menu'），数据）；
$（'.menu'）.menu（）；
}
})
var lastleElement；//如果在最后一个元素中附加更多实例
功能构建菜单（父项、项）{
var tabOccurance=[]；
$。每个（项目、功能（）{
var nboccurance=countOccurance（this.MenuText，items）；
//搜索是否存在事件文本
if（tabOccurance.indexOf（this.MenuText）=-1）{//这在ecma6及以上版本上不起作用
var length=this.ParentID==null？this.List.length:nbocurnace；
var li=$（“
”+this.MenuText+”（“+length+”）“+”
”）；
lastliElement=li；
如果（！this.Active）{
li.addclass（'ui-state-disabled'）；
}
li.附属于（母公司）；
}
如果（发生率>1）
tabOccurance.push（this.MenuText）；
if（this.List&&this.List.length>0）{
var ul=$（“
”）；
ul.附录（最后一项）；
构建菜单（ul，this.List）；
}
});
}
//推测menuText的发生
函数countOccurance（菜单文本，列表）{
变量计数=0
$。每个（列表、函数（）{
if（this.MenuText===MenuText）
计数++；
});
返回计数；
}
});

---

这里有一个。

Create

countOccurance

函数，用于计数和测试是否添加了菜单文本

$(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;
  }
});

$（文档）.ready（函数（）{
$.ajax({
url:'MenuHandler.ashx'，
方法：“get”，
数据类型：“json”，
成功：功能（数据）{
data=JSON.parse（数据）；
构建菜单（$（'.menu'），数据）；
$（'.menu'）.menu（）；
}
})
var lastleElement；//如果在最后一个元素中附加更多实例
功能构建菜单（父项、项）{
var tabOccurance=[]；
$。每个（项目、功能（）{
var nboccurance=countOccurance（this.MenuText，items）；
//搜索是否存在事件文本
if（tabOccurance.indexOf（this.MenuText）=-1）{//这在ecma6及以上版本上不起作用
var length=this.ParentID==null？this.List.length:nbocurnace；
var li=$（“
”+this.MenuText+”（“+length+”）“+”
”）；
lastliElement=li；
如果（！this.Active）{
li.addclass（'ui-state-disabled'）；
}
li.附属于（母公司）；
}
如果（发生率>1）
tabOccurance.push（this.MenuText）；
if（this.List&&this.List.length>0）{
var ul=$（“
”）；
ul.附录（最后一项）；
构建菜单（ul，this.List）；
}
});
}
//推测menuText的发生
函数countOccurance（菜单文本，列表）{
变量计数=0
$。每个（列表、函数（）{
if（this.MenuText===MenuText）
计数++；
});
返回计数；
}
});

---

这是一个。

for循环中的警报消息抛出[object object]是正常的，因为您正在发出警报

n

；一个jQuery对象（

n=$（'.menu li'）

）！另一件事，请问您为什么需要

BMW（2）>M3（2）

安装

BMW（2）>M3

？对于我来说，你需要的是后者，因为没有M3计数的信息。你同意我的观点吗？好吧，我仍然询问

BMW（2）>M3（2）

，对于我来说，第一个数字

2

是关于BMW存在的数量，第二个数字

2

是关于M3存在的数量，这是一个数字