В DOM определены классы обхода документов, которые позволяют последовательно обрабатывать содержимое дерева. Классы TreeWalker и NodeIterator для идеальных кандидатов на это.
Сначала мы создаем экземпляр TreeWalker, который может последовательно перебирать узлы <li>.
var walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
function(node) {
var hasNoElements = node.getElementsByTagName('*').length == 0;
return (node.nodeName == "LI" && hasNoElements) ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
},
false
);
Далее мы итерируем до текущего узла в этом TreeWalker. Допустим, у нас была ссылка на наш текущий узел в myNode. Мы пройдем по этому ходунку, пока не достигнем myNode или нулевого значения.
while(walker.nextNode() != myNode && walker.currentNode);
Достигнув нашего узла в этом TreeWalker, получить предыдущий узел - кусок пирога.
var previousNode = walker.previousNode();
Вы можете попробовать пример здесь .
Вот общая версия бродилки по дереву. Это крошечная оболочка для интерфейса TreeWalker.
function backwardsIterator(startingNode, nodeFilter) {
var walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
function(node) {
return nodeFilter(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
},
false
);
walker.currentNode = startingNode;
return walker;
}
Требуется начальный узел и пользовательская функция фильтра для удаления нежелательных элементов. Вот пример использования запуска в данном узле и только включения листовых li элементов.
var startNode = document.getElementById("2.1.1");
// creates a backwards iterator with a given start node, and a function to filter out unwanted elements.
var iterator = backwardsIterator(startNode, function(node) {
var hasNoChildElements = node.childElementCount == 0;
var isListItemNode = node.nodeName == "LI";
return isListItemNode && hasNoChildElements;
});
// Call previousNode() on the iterator to walk backwards by one node.
// Can keep calling previousNode() to keep iterating backwards until the beginning.
iterator.previousNode()
Обновлено с интерактивным примером . Нажмите на элемент списка, чтобы выделить предыдущий элемент списка.