数据通过jQuery操作树结构

Question

下面是树结构，我想通过jquery获得第二个树结构。

<ul>
    <li data-id="1">
        <ul>
            <li data-id="2">
                <ul>
                    <li data-id="6"></li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-id="3"></li>
    <li data-id="4"></li>
</ul>

这是我想要的目标结构，我该怎么做？

<ul>
    <li data-id="1" data-path="1">
        <ul>
            <li data-id="2" data-path="1,2">
                <ul>
                    <li data-id="6" data-path="1,2,6"></li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-id="3" data-path="3"></li>
</ul>

Answer 1

尝试以下方法：

$('li[data-id]').each(function() {
  var self = $(this);
  var path;
  self.parents('li[data-id]').andSelf().each(function() {
    if (path) {
      path = $(this).data('id') + ',' + path;
    } else {
      path = $(this).data('id');
    }
  });
  self.attr('data-path', path);
});

See here for jsFiddle.