1

例如：

[{
    id:'our-purpose',
    title:'Our Purpose',
    slug:'/our-purpose',
    backgroundImage:'images/bg-our-purpose.jpg',
    showInNav:1
  },
  {
    id:'our-people',
    title:'Our People',
    slug:'/our-people',
    backgroundImage:'images/bg-our-people.jpg',
    showInNav:1,
    subpages:[
      {
        id:'attorneys',
        title:'Attorneys',
        slug:'/our-people/attorneys',
        subpages:[
          {
            id:'attorneys-cdb',
            title:'Attorneys - Carla DeLoach Bryant',
            slug:'/our-people/attorneys/carla'
          },
          {
            id:'attorneys-jad',
            title:'Attorneys - Jordan A. DeLoach',
            slug:'/our-people/attorneys/jordan'
          },
          {
            id:'attorneys-shh',
            title:'Attorneys - Sarah H. Hayford',
            slug:'/our-people/attorneys/sarah'
          },
          {
            id:'attorneys-jsp',
            title:'Attorneys - Jason S. Palmisano',
            slug:'/our-people/attorneys/jason'
          },
          {
            id:'attorneys-ldw',
            title:'Attorneys - Lindsey DeLoach Wagner',
            slug:'/our-people/attorneys/carla'
          },
        ]
      },
      {
        id:'legal-support',
        title:'Legal Support',
        slug:'/our-people/legal-support',
        subpages:[
          {
            id:'legal-support-tb',
            title:'Legal Support - Theolyn Brock',
            slug:'/our-people/attorneys/theolyn'
          },
          {
            id:'legal-support-cd',
            title:'Legal Support - Cheri DeFries',
            slug:'/our-people/attorneys/cheri'
          },
        ]
      },
 //...and so on

你会注意到你可以做到，json[1].subpages[0].subpages[0]但我不知道它会有多深。这是我的一位设计师客户为他正在为客户构建的 AJAX 网站编写的。我正在尝试生成导航，并且需要能够：

A. 递归解析这个来构建一个导航（<ul><li><a>...）

B. 搜索匹配的 id。像这样（但这不是递归的）[并忽略for...in，这只是为了举例）

var matchId(id,json){
  for(x in json){
    if(json[x].id == id){ var theMatch = json[x]; break; }
  }
}
4

5 回答 5

2

此代码为您构建导航：

function buildNavForNode(node) {
  var result = "<li id='" + node.id + "'><a href='" + node.slug + "'>" + node.title + "</a>";
  if(node.subpages == undefined) {
    return result + "</li>";
  } else {
    return result + buildNavForNodes(node.subpages) + "</li>";
  }
}


function buildNavForNodes(nodes) {
  var result = "<ul>";
  var i = 0;
  var len = nodes.length;
  for(; i < len; i++) {
    result += buildNavForNode(nodes[i]);
  }
  return result + "</ul>";
}

下面是你如何使用它：

var testData = [
  {
    id:'our-purpose',
    title:'Our Purpose',
    slug:'/our-purpose',
    backgroundImage:'images/bg-our-purpose.jpg',
    showInNav:1
  },
  {
    id:'our-people',
    title:'Our People',
    slug:'/our-people',
    backgroundImage:'images/bg-our-people.jpg',
    showInNav:1,
    subpages:[
      {
        id:'attorneys',
        title:'Attorneys',
        slug:'/our-people/attorneys',
        subpages:[
          {
            id:'attorneys-cdb',
            title:'Attorneys - Carla DeLoach Bryant',
            slug:'/our-people/attorneys/carla'
          },
          {
            id:'attorneys-jad',
            title:'Attorneys - Jordan A. DeLoach',
            slug:'/our-people/attorneys/jordan'
          },
          {
            id:'attorneys-shh',
            title:'Attorneys - Sarah H. Hayford',
            slug:'/our-people/attorneys/sarah'
          },
          {
            id:'attorneys-jsp',
            title:'Attorneys - Jason S. Palmisano',
            slug:'/our-people/attorneys/jason'
          },
          {
            id:'attorneys-ldw',
            title:'Attorneys - Lindsey DeLoach Wagner',
            slug:'/our-people/attorneys/carla'
          },
        ]
      },
      {
        id:'legal-support',
        title:'Legal Support',
        slug:'/our-people/legal-support',
        subpages:[
          {
            id:'legal-support-tb',
            title:'Legal Support - Theolyn Brock',
            slug:'/our-people/attorneys/theolyn'
          },
          {
            id:'legal-support-cd',
            title:'Legal Support - Cheri DeFries',
            slug:'/our-people/attorneys/cheri'
          },
        ]
      }
    ]
  }
];

$(function(){
  htmlToInsert = buildNavForNodes(testData);
  console.log(htmlToInsert);
  $('body').html(htmlToInsert);
});

您可以使用递归函数很容易地做到这一点，但我认为这很好地描述了在确定如何处理页面集合和处理单个页面之间的职责分离。

于 2011-07-10T10:00:19.120 回答
1

我想试试JSONPath你可以在这里找到代码。

于 2011-07-10T10:03:31.857 回答
1

这是一个开始（在 JavaScript 和伪代码的某种混合中）：

function createMenu(data) {
    create UL
    for each item in data {
        create LI for item in UL
        if the item has subpages {
            append createMenu(item.subpages) to the LI
        }
    }
    return UL
}

function findByID(data, id) {
    for each item in data {
        if(item.id==id) {
            return the item
        }
        if item has subpages {
            if findByID(item.subpages, id) is not null, return the result
        }
    }
    return null;
}
于 2011-07-10T02:41:34.260 回答
1 
function matchId(id, json){
  if (!(json && "object" === typeof json)) { return; }
  if (json.id === id) { return json; }
  for (var x in json){
    if (Object.hasOwnProperty.call(json, x)) {
      var result = matchId(id, json[x]);
      if (result !== undefined) { return result; }
    }
  }
}
于 2011-07-10T02:42:02.940 回答
0

我用这段代码生成了导航，因为我只想要第一级：

$('#sidebar').append('<ul></ul>');

for(x in PAGES){
  if(PAGES[x].showInNav == 1){
    $('#sidebar > ul').append('<li data-id="'+PAGES[x].id+'"><a href="#!'+PAGES[x].slug+'">'+PAGES[x].title+'</a></li>');
    if(PAGES[x].subpages){
      $('#sidebar > ul > li:last').append('<ul></ul>');
      for(y in PAGES[x].subpages){
        $('#sidebar > ul > li:last > ul').append('<li data-id="'+PAGES[x].subpages[y].id+'"><a href="#!'+PAGES[x].subpages[y].slug+'">'+PAGES[x].subpages[y].title+'</a></li>');
      }
    }
  }
}

然后，对于递归匹配函数，我最终得到了以下代码：

var matchKey = function(k,v,j){  
  k = k || 'id';  //key
  v = v || '';    //value
  j = j || PAGES; //json
  for(x in j){
    if(j[x][k] == v){
      return j[x];
    }
    if(j[x].subpages){
      var result = matchKey(k,v,j[x].subpages);
      if(result !== undefined){
        return result;
      }
    }
  }
}
于 2011-07-10T21:00:14.677 回答