Question

我需要将整个UL及其子元素转换为JSON对象。

这就是我们所做的：

function getData(el) {
    el.find('li').each(function () {
        data.push({ "nome": $(this).find('span').html(), "cargo": $(this).find('strong').html()  });
    });
}

JS小提琴：https://jsfiddle.net/cbzo0ef2/2/

但是所有元素都在同一级别。在这种情况下，需要保留所有级别。

Answer 1

$(this).parents("ul").length会对你有所帮助：

function getData(el) {
    el.find('li').each(function () {
        data.push({ "nome": $(this).find('span').html(), "cargo": $(this).find('strong').html(), "dept": $(this).parents("ul").length  })
    });
  }

你需要额外的工作来为你的json结构渲染dept

请参阅fiddle

Answer 2

此解决方案将保留HTML中的级别：

(function($) {

    function getData(el) {
        var data = [];

        el.children('li').each(function () {
            var currentElement = $(this);

            var nomeElement = currentElement.children('span')[0];
            var cargoElement = currentElement.children('strong')[0];

            var item = {};

            if (nomeElement && cargoElement) {
                item.nome = $(nomeElement).html();
                item.cargo = $(cargoElement).html();
            }

            data.push(item);

            var child = currentElement.children('ul')[0];

            if (child != null) {
                item.children = getData($(child));
            }
        });

        return data;
    }

    var data = getData($('.root'));
    console.log(data);

})(jQuery);

请参阅小提琴：https://jsfiddle.net/52t58551/

Answer 3

使用jQuery Children和一些递归，您可以获得每个节点。

(function($) {
  function getData(el) {
    var curr = [];
    el.children('li, ul').each(function(i, child) {
      curr.push({
        nodeName: child.nodeName,
        nome: $(child).find("> span").text(),
        cargo: $(child).find("> strong").text(),
        subLevel: getData($(child))
      });
    });
    return curr
  }

  var result = getData($('.root'));
  console.log(JSON.stringify(result));

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="root"> <li><span>a</span><strong>b</strong></li><li><span>c</span><strong>d</strong></li><li><span>e</span><strong>f</strong></li><li> <ul> <li><span>g</span><strong>h</strong></li><li><span>i</span><strong>j</strong></li><li> <ul> <li><span>k</span><strong>l</strong></li></ul> </li></ul> </li></ul>

将UL转换为JSON对象

3 个答案: