时间戳

首页 > 解决方案 > 如何将此 jQuery 代码转换为 vanilla Javascript？

javascript - 如何将此 jQuery 代码转换为 vanilla Javascript？

问题描述

我正在尝试将此 jquery 代码转换为 vanilla javascript。实际上，此代码正在ul li使用此 json 数据动态构建嵌套。任何人都可以帮助我吗？

这是我的代码

var tree = [
  {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [
          {
            name: 'Broccoli',
            children: [{ name: 'Broccoli-sub1' }, { name: 'Broccoli-sub2' }],
          },
          { name: 'cabbage' },
          { name: 'Brussels' },
        ],
      },

      {
        name: 'Orange',
        children: [{ name: 'Pumpkins' }, { name: 'Carrots' }],
      },
    ],
  },
];

function recursive_tree(data, tag, child_wrapper, level) {
  var html = [];
  //return html array;
  level = level || 0;
  child_wrapper = child_wrapper != false ? child_wrapper : 'ul';
  $.each(data, function (i, obj) {
    var el = $('<' + tag + '>');
    el.html(obj.name);
    if (obj.hasOwnProperty('children')) {
      var wrapper = $('<' + child_wrapper + '>');
      var els = recursive_tree(obj.children, tag, child_wrapper);
      wrapper.append(els);
      wrapper.appendTo(el);
    }
    html.push(el);
  });

  return html;
}

var html = recursive_tree(tree, 'li', 'ul');
console.log(html);
$('#parent').append(html);
`enter code here`;

标签： javascriptjquerytreeview

解决方案

有很多方法可以做到这一点。这是一种生成内部html的方法

var tree = [{
  "name": 'Vegetables',
  "children": [{
      "name": 'Green',
      "children": [{
          "name": 'Broccoli',
          "children": [{
              "name": "Broccoli-sub1"
            },
            {
              "name": "Broccoli-sub2"
            }
          ]
        },
        {
          "name": "cabbage"
        },
        {
          "name": 'Brussels'
        },
      ]
    },

    {
      "name": 'Orange',
      "children": [{
          "name": 'Pumpkins'
        },
        {
          "name": 'Carrots'
        },
      ]
    },
  ]
}]

function recursive_tree(data, tag, child_wrapper, level) {
  let html = [];
  //return html array;
  level = level || 0;
  child_wrapper = !child_wrapper ? child_wrapper : 'ul';
    
  data.forEach(obj => {
    html.push(`<${tag}>${obj.name}`);
    if (obj.hasOwnProperty('children')) {
        html.push(`<${child_wrapper}>`);
      html = html.concat(recursive_tree(obj.children, tag, child_wrapper))
      html.push(`</${child_wrapper}>`);
        }
    html.push(`</${tag}>`);
    });

  return html;
}

var html = recursive_tree(tree, 'li', 'ul');
console.log(html);
const parent = document.getElementById('parent');
parent.innerHTML += html.join("");
<div id="parent"></div>

推荐阅读