Question

Below is tree structure and i want to have second tree structure by 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>

this is destination structure that i want to have so how can i do that ?

<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

Try the following:

$('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.