Построить массив на основе дерева иерархических узлов - PullRequest
Новая
       0

Построить массив на основе дерева иерархических узлов

1 голос
/ 02 ноября 2011

У меня есть следующая HTML-разметка: 

<body>
   <div class="wrapper">
      <div class="head">
         <p class="title">title</p>
         <a href="#" class="logo"></a>
      </div>
   </div>
</body

Мне нужно получить что-то вроде следующего - элемент "A" с классом "logo" является вторым childNode элемента div с головой "class"».Элемент div с классом «head» является первым childNode элемента div с классом «wrapper», элемент div с классом «wrapper» является первым childNode тела.Тогда я получу расположение ссылки с классом «логотип» следующим образом:

var a = [1, 1, 2]

Итак, если я пойду в противоположном направлении, используяВ массиве выше я найду ссылку с классом "логотип" в DOM, начиная с элемента body.Может кто-нибудь сказать мне, как это может быть достигнуто с помощью JavaScript?

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 02 ноября 2011

Вот пара функций, адаптированных из моего существующего кода для превращения узла в массив вложенных позиций внутри узла и обратно.

Демонстрация в реальном времени: http://jsfiddle.net/DSNUv/

Код: 

function getNodeIndex(node) {
    var i = 0;
    while( (node = node.previousSibling) ) {
        i++;
    }
    return i;
}

function nodeToPath(node, rootNode) {
    var path = [], n = node;
    rootNode = rootNode || document.documentElement;
    while (n && n != rootNode) {
        path.push(getNodeIndex(n));
        n = n.parentNode;
    }
    return path;
}

function pathToNode(path, rootNode) {
    rootNode = rootNode || document.documentElement;
    var node = rootNode;
    var i = path.length, nodeIndex;

    while (i--) {
        nodeIndex = path[i];
        if (nodeIndex < node.childNodes.length) {
            node = node.childNodes[nodeIndex];
        } else {
            throw new Error("Child node index out of range: " + nodeIndex);
        }
    }

    return node;
}

Пример использования: 

var a = document.getElementsByTagName("a")[0];

var path = nodeToPath(a, document.body);
alert(path);

var el = pathToNode(path, document.body);
alert(el.className);
1 голос
/ 02 ноября 2011

Учитывая следующий HTML: 

<body>
   <div class="wrapper">
      <div class="head">
         <p class="title">title</p>
         <a href="#" class="logo"></a>
      </div>
   </div>
</body

var el = document.body; // body
var div = document.body.firstChild; // div.wrapper
el === div.parentNode; // body === body
var div2 = div.firstElementChild; // div.head
div2.parentNode.parentNode === el; // body === body
var p = div2.firstElementChild; // p.title
var a = p.nextElementSibling; // a.logo
div2.children[1] === a; // a === a

Я не совсем уверен, чего вы добиваетесь.Но я рекомендую вам просто пройтись по дереву, а не строить корабли отношений в каком-то массиве.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...