[miRrage]

Здравствуйте!
Только разбираюсь с jQuery, и не могу понять что-то базовое.
С целью изучения языка хочу сделать, и в общем, можно сказать, что сделал на базе виджета sortable простенький визуальный инструмент для управления иерархической структурой (пример - меню сайта, категории товаров, статей).
Что-то типа accordion, только с dragndrop, контекстным меню добавления и удаления , разным уровнем раскрытия.
Возникают вопросы со скрытием/раскрытием подпунктов.

Пример списка, над которым производятся действия:

<div class="row">
      <div class="col-md-3">
        <ul id="sortable">
            <li class="catList defaultLi" data-level="1" data-row-id="1"> one</li>
            <li class="catList defaultLi" data-level="2" data-row-id="2"> two</li>
            <li class="catList defaultLi" data-level="2" data-row-id="3"> three</li>
            <li class="catList defaultLi" data-level="3" data-row-id="4"> four</li>
            <li class="catList defaultLi" data-level="3" data-row-id="5"> five</li>
            <li class="catList defaultLi" data-level="1" data-row-id="6"> six</li>
            <li class="catList defaultLi" data-level="2" data-row-id="7"> seven</li>
            <li class="catList defaultLi" data-level="1" data-row-id="8"> eight</li>
        </ul>
      </div>
</div>

Первая проблема в том, что не получается выбрать нужные пункты и скрыть (slideToggle()) их вместе одним набором. Например, при клике на 1-м элементе списка, хочу свернуть все лежащие ниже и у которых [level] больше "1" (здесь это 2,3,4,5). Сделать селектором не знаю как, т.к. еще ниже опять есть элементы с уровнем "1" и их не нужно затрагивать.
Сделал функцией:

<script>
//сворачивание
     $('.catList').click(function(){
            var arr=[];
            //значение уровня кликнутого элемента
            var le = +( $(this).attr('data-level'));
            //получение массива значений уровня элементов, которые лежат ниже,
            //и имеют уровень меньший, чем тот, на котором произведен клик.
            arr= getArr($(this), arr, le);
            
            //сворачивание/разворачивание
            for(i=0; i<arr.length; i++){
                var selector = '[data-row-id='+arr[i]+']';
                $(selector).slideToggle();
            }

     });
         
      function getArr(item, arr, le){
        if (
               ( +item.next().attr('data-level') >=  +item.attr('data-level')) &&
               ( +item.next().attr('data-level') > le)
           )
            {
                arr.push(item.next().attr('data-row-id'));
                getArr(item.next(), arr, le);
            }
        return arr;
      };
    
</script>

Это работает. Но не так как хотелось бы. Здесь в коде, $(this) представляет собой элемент jQuery. Правильно? Вызываю функцию getArr, которая принимает этот элемент, пустой массив, и значение и возвращает этот же массив заполненным.
В функции методом .next() получаю следующий элемент и значение [row-id] заношу в массив. А хотелось бы получить на выходе функции набор элементов jQuery к которому потом можно применить slideToggle.
Пытаюсь делать

arr.add(item.next())

- не выполняется.
Приходится в массив сохранять значение атрибута [row-id], а затем в цикле по значению поочередно выбирать элемент и к нему применять slideToggle.
Хочется сделать групповой операцией типа

arr.slideToggle();

Кто-нибудь может подсказать как?