Question

我想将子类别放在父类别下，如果父类别id＃匹配父类＃我想显示在父类别下面。如果你看下面你会看到类别ID＃1是父类别和子类别有＆＃34; parent：1＆＃34;为了价值。如果你需要我清楚地告诉我，我希望这是有道理的。

jquery代码：

// get categories lists
function listCategories(data) {
  "use strict";
  var output = '<ul data-role="listview"  data-inset="true" >';
  $.each(data.categories, function(key, val) {
    if (val.id == val.parent) {

        output += '<li><a href="#'+ val.slug + '">' + val.title + '+</a></li>';
    }else if (val.id !== val.parent) {

  output += '<li><a href="#'+ val.slug + '">' + val.title + '-</a></li>';
    }

  }); //go through each list item
  output += '</ul>';
  $('#postlist').html(output);

}

json代码：

"status": "ok",
    "count": 7,
    "categories": [
        {
            "id": 4,
            "slug": "all-qualified-retirement-plans",
            "title": "All Qualified Retirement Plans",
            "description": "",
            "parent": 1,
            "post_count": 4
        },
        {
            "id": 5,
            "slug": "defined-benefit-db-plans",
            "title": "Defined Benefit (DB) Plans",
            "description": "",
            "parent": 1,
            "post_count": 2
        },
        {
            "id": 6,
            "slug": "defined-contribution-and-hybrid-plans",
            "title": "Defined Contribution and Hybrid Plans",
            "description": "",
            "parent": 1,
            "post_count": 6
        },
        {
            "id": 7,
            "slug": "fica-ss-medicare-taxes",
            "title": "FICA - SS &amp; MEDICARE TAXES",
            "description": "",
            "parent": 0,
            "post_count": 4
        },
        {
            "id": 2,
            "slug": "healthcare-plans",
            "title": "Healthcare Plans",
            "description": "",
            "parent": 0,
            "post_count": 5
        },
        {
            "id": 3,
            "slug": "other-benefits",
            "title": "Other Benefits",
            "description": "",
            "parent": 0,
            "post_count": 3
        },
        {
            "id": 1,
            "slug": "retirement-plans",
            "title": "Retirement Plans",
            "description": "",
            "parent": 0,
            "post_count": 13
        }
    ]
}

Answer 1

一个简单的黑客就是在将li元素添加到dom之后对其进行重新排序

// get categories lists
function listCategories(data) {
  "use strict";
  var output = '<ul data-role="listview"  data-inset="true" >';
  $.each(data.categories, function(key, val) {
    output += '<li data-id="' + val.id + '" data-parent="' + val.parent + '"><a href="#' + val.slug + '">' + val.title + '+</a></li>';
  }); //go through each list item
  output += '</ul>';
  var $ul = $(output);

  $ul.children().each(function() {
    var parent = $(this).data('parent');
    var $li = $ul.find('li[data-id="' + parent + '"]');
    if ($li.length) {
      var $cul = $li.find('ul');
      if (!$cul.length) {
        $cul = $('<ul/>').appendTo($li);
      }
      $cul.append(this)
    }
  });
  $ul.find('li:has(ul) > a').contents().unwrap();

  $('#postlist').html($ul);

}

var data = {
  "status": "ok",
  "count": 7,
  "categories": [{
    "id": 4,
    "slug": "all-qualified-retirement-plans",
    "title": "All Qualified Retirement Plans",
    "description": "",
    "parent": 1,
    "post_count": 4
  }, {
    "id": 5,
    "slug": "defined-benefit-db-plans",
    "title": "Defined Benefit (DB) Plans",
    "description": "",
    "parent": 1,
    "post_count": 2
  }, {
    "id": 6,
    "slug": "defined-contribution-and-hybrid-plans",
    "title": "Defined Contribution and Hybrid Plans",
    "description": "",
    "parent": 1,
    "post_count": 6
  }, {
    "id": 7,
    "slug": "fica-ss-medicare-taxes",
    "title": "FICA - SS &amp; MEDICARE TAXES",
    "description": "",
    "parent": 0,
    "post_count": 4
  }, {
    "id": 2,
    "slug": "healthcare-plans",
    "title": "Healthcare Plans",
    "description": "",
    "parent": 0,
    "post_count": 5
  }, {
    "id": 3,
    "slug": "other-benefits",
    "title": "Other Benefits",
    "description": "",
    "parent": 0,
    "post_count": 3
  }, {
    "id": 1,
    "slug": "retirement-plans",
    "title": "Retirement Plans",
    "description": "",
    "parent": 0,
    "post_count": 13
  }]
};

listCategories(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="postlist"></div>

Answer 2

我能想到的最干净的方法是（Fiddle）：

首先映射父子关系。然后以递归方式打印要显示的树。这甚至可以在树中启用更多级别。它不会添加超过必要的DOM操作

function listCategories(data) {
  "use strict";
  var output = '<ul data-role="listview"  data-inset="true" >';
  var children = {};
  var dataById = {};

  // Map parent-children relations
  $.each(data.categories, function(key, val) {
    (children[val.parent] = children[val.parent] || []).push(val.id);
    dataById[val.id] = val;
  });

  // Work recursive through the tree 
  var printRecursive = function(id) {
    var subs = "";
    $.each(children[id] || [], function(key, val) {
      subs += printRecursive(val);
    });
    if (dataById[id]) {
      var hasChildren = subs != "";
      var result = "<li>"
      if(hasChildren) {
        result += dataById[id].title;
        result += "<ul>" + subs + "</ul>";
      } else {
        result += '<a href="#' + dataById[id].slug + '">' + dataById[id].title + '</a>';
      }
      result += "</li>";
      return result;
    }

    return subs;
  };
  // Print tree with root 'id=0'
  $('#postlist').html('<ul data-role="listview"  data-inset="true" >' + printRecursive(0, 0) + '</ul');
}

这样做了。

更新：父母没有链接。

Json：如果类别id与父母编号匹配，则将类别放在neath父类别下

2 个答案: