Перемещение через вложенный список - jQuery

Question

Я в настоящее время делаю обход DOM с jQuery, я пытаюсь выбрать каждый элемент по одному в #treeList, когда кнопка нажата, но как только он проходит второй список #innerList, он выберет все элементы в этом списке и продолжит работу над списком по клику. Как вы можете продолжить через #innerList, как и с #treeList?

$("#MoveDown").click(function() { 
 
    $('.parentStyle + li, li:eq(0)') 
 
    .last() 
 
    .addClass('parentStyle').siblings('li') 
 
    .removeClass('parentStyle'); 
 
});

.parentStyle { 
 

 
     background-color: #F99; 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="treeList"> 
 
    <li class="parent">Aunt Grace</li> 
 
    <li class="parent">Mother Joan</li> 
 
    <li class="parent">Father Joe 
 
     <ul id="innerList"> 
 
     <li class="child">Son John</li> 
 
     <li class="child">Son James</li> 
 
     <li class="child">Daughter Aine</li> 
 
     </ul> 
 
    </li> 
 
    <li class="parent">Uncle Tom</li> 
 
    <li class="parent">Aunt Jen</li> 
 
    </ul> 
 
</div> 
 

 
<button id="MoveDown">Move down</button>

Answer 1

Я не 100%, как вы хотите обход работать, но я собираюсь принять удар на него с этим предположением:

, как вы хотели бы его работать - это путешествовать по всем LI, которые являются непосредственными детьми данного UL (lvl 0). Если LI содержит UL (lvl1), вы хотели бы окунуться в этот под-список (lvl 1), прежде чем продолжить обратно через родительский соседний LI (lvl 0).

Если это предположение точное, этот код будет выполнить следующее:

$('.clickit').click(function() { 
    var level = 0; 
    var $list = $('#treeList'); 
    traverseList($list, level); 
}); 

function traverseList($list, level) { 
    if ($list.length > 0) { 
     $list.children('li').each(function() { 
      $(this).prepend(level); 
      if ($(this).children('ul')) { 
       traverseList($(this).children('ul'), level + 1); 
      } 
     }); 
    } 
} 

И сопутствующий Fiddle бы дем его: http://jsfiddle.net/xhh4wqv7/1/

Update: Потому что я не прочитал ваш оригинальный образец коды , или не обратил должного внимания, я не ответил точно, что вы искали. Поскольку я видел, что вы переходите с 1 на 1 к следующему и добавляете класс, я обновляю новый скрипт.

Используя метод index(), вы можете отслеживать, где вы находитесь в дереве. Я думаю, что это может быть самый простой способ передвижения. Единственное осложнение возникает, если вы хотите сохранить стиль на родительском узле или хотите добавить другой класс, но это может быть выполнено с помощью .closest ('li') по меньшей мере.

Код:

$("#MoveDown").click(function() { 
    var $tree = $('#treeList'); 
    var $li = getLi($tree); 
    $tree.find('li').removeClass('parentStyle'); 
    $li.addClass('parentStyle');  
}); 

function getLi($tree) { 
    var $li = $tree.find('.parentStyle').last(); 
    var $liList = $tree.find('li'); 
    var idx = $liList.index($li); 
    if (idx < 0 || idx == $liList.length) { return $liList.first(); } 
    else { return $liList.eq(idx + 1); } 
} 

Fiddle: http://jsfiddle.net/xhh4wqv7/4/