Изменение порядка отображения элементов списка li

Вот уже несколько месяцев работаю на новом месте, занимаюсь развитием сайта компании. Немного опишу сам проект, т.к. считаю его интересным. Сам сайт построен на Битрикс 14, функционал содержит интернет-магазин, особенность которого состоит в взаимодействии с SAP , от туда подтягиваются данные по остаткам, ценам и характеристикам в режиме реального времени.

Т.к. работаю совсем недавно, то каждая задача уникальна и интересна. Вот например:

И так, есть меню продукции, которое имеет 3 уровня вложенности.

Категория продукта 1
Категория продукта 2
  Под раздел 1
  Под раздел 2
  Под раздел 3
Категория продукта 3
Категория продукта 3  

Задача в "Категории продукта 2" вложенным пунктам задать необходимый порядок
Категория продукта 2
  Под раздел 3
  Под раздел 1
  Под раздел 2

Изначально мне казалось, что все просто - нужно задать порядок разделов в Битрикс, но вот облом не нашел я такой возможности, видел подобные вопросы на форуме без ответа.
Ладно, у нас же есть ещё и SAP нужно там задать нужный порядок и будет счастье, но и тут облом, в SAP все хорошо, а на сайте порядок не меняется.

Что же делать дальше, меню продукции выводит компонент Битрикс, нужно его скопировать и доработать с возможностью задавать порядок пунктам меню. Но это сложно пока для меня, поэтому решил задачу с помощью jQuery. Сложность состояла в выборе элементов списка, т.к. они не имеют уникальных ID.

И так имеем вот такой список
http://jsfiddle.net/gwocnepp/1/

Т.к. в конкретной задаче я знаю сколько всего элементов, и как они называются, то можно решить задачу "влоб"
Сначала получим нужные элементы, и положим в переменные.

var element1 =  $('ul:contains("Категория продукта 2")>ul>li:nth-child(1)').detach();
var element2 =  $('ul:contains("Категория продукта 2")>ul>li:nth-child(1)').detach();
var element3 =  $('ul:contains("Категория продукта 2")>ul>li:nth-child(1)').detach();

Если сейчас выполнить код то подразделы не будут отображаться, мы сделали удаление элемента без разрушения его содержимого   detach().

Теперь используя переменные element1, element2, element3, установим нужный нам порядок (3,2,1)

$('ul:contains("Категория продукта 2")>ul').append(element3);
$('ul:contains("Категория продукта 2")>ul').append(element1);
$('ul:contains("Категория продукта 2")>ul').append(element2);

Результат можно посмотреть тут http://jsfiddle.net/gwocnepp/1/


Добавляем этот скрипт в footer шаблона и наслаждаемся жизнью

Есть конечно минусы у такого решения:
- меню будет постоянно перерисовываться при открытии страницы
- не универсальность,т.е. стоит заголовку поменяться или появится новый пункт меню и сортировку придётся переделывать.