Как сделать дерево используя jQuery?

Question

[Игорь Катков]

Доброго времени суток!
Есть большой список подобного вида:

<ul>
  <li data-category-id="1" data-category-parent-id=""></li>
  <li data-category-id="2" data-category-parent-id="1"></li>
  <li data-category-id="3" data-category-parent-id=""></li>
  <li data-category-id="4" data-category-parent-id=""></li>
  <li data-category-id="5" data-category-parent-id="1"></li>
  <li data-category-id="6" data-category-parent-id=""></li>
  <li data-category-id="7" data-category-parent-id=""></li>
  <li data-category-id="8" data-category-parent-id="3"></li>
  <li data-category-id="9" data-category-parent-id="6"></li>
  <li data-category-id="10" data-category-parent-id="6"></li>
</ul>

Нужно, что бы было вот такое дерево:

<ul>
  <li data-category-id="1" data-category-parent-id="">
    <ul>
      <li data-category-id="2" data-category-parent-id="1"></li>
      <li data-category-id="5" data-category-parent-id="1"></li>
     </ul>
  </li>
  <li data-category-id="3" data-category-parent-id="">
    <ul>
      <li data-category-id="8" data-category-parent-id="3"></li>
    </ul>
  </li>
  <li data-category-id="4" data-category-parent-id=""></li>
  <li data-category-id="6" data-category-parent-id="">
    <ul>
        <li data-category-id="9" data-category-parent-id="6"></li>
        <li data-category-id="10" data-category-parent-id="6"></li>
    </ul>
  </li>
  <li data-category-id="7" data-category-parent-id=""></li>
</ul>

У каждого тэга li есть атрибут "data-category-id" и "data-category-parent-id". В первом хранится уникальный id категории, а второй говорит, какой элемент является для него родительским. Другими словами, все в перемешку и нужно сделать так, что бы дочерние элементы стали вложенными к родительским.
data-category-id - id категррии
data-category-parent-id - id родителя. Если id == null, то это корневая категория

Как с помощью jQuery сделать дерево с вложенными списками?

Я пробовал так, но добавляется только один элемент, а как найти все и добавить ума не приложу

$(document).ready(function() {
                $("li").each(function () {
                    var parentId = $(this).data('category-id');
                    var test = $("li[data-category-parent-id = " + parentId + "]").html();
                    if (test) {
                        $(this).append("<ul><li>" + test + "</li><ul>");
                    }
                });
            });

Comments

[Виталий Инчин ☢]

li является родителем li? Ничего не перепутали?

[Игорь Катков]

Виталий Инчин ☢: имелось в виду, какая категория является родительской :) сейчас исправлю

[Виталий Инчин ☢]

Игорь Катков: каким должен быть результат из html-кода выше?

[Игорь Катков]

Виталий Инчин ☢: обновил вопрос

Answer 1

[Виталий Инчин ☢]

$('li[data-category-parent-id=""]').append("<ul></ul>");

$("li").each(function(){
  var dts = this.dataset.categoryParentId;
  dts&&$("li[data-category-id="+dts+"] > ul").append(this);
});

P.s: Мне кажется, можно лучше...

UPD: Тест

Comments

[Игорь Катков]

Спасибо, это то что было нужно за исключением маленьких поправок :) Выручили!