Как разобрать DOM с помощью jQuery?

Question

<div class="top">
    <div class="branch">
        <div class="branch">
             <div class="leaf">click</div>
        </div>
    </div>
</div>

Когда я нажимаю на самый внутренний <div class="leaf">, как пройти весь путь от top к себе:

top,branch,branch,leaf

РЕДАКТИРОВАТЬ, чтобы уточнить Я хочу, чтобы путь в массиве:

arr[0]='top';
arr[1]='branch';
arr[2]='branch';
arr[3]='leaf';

Есть ли простое решение?

Answer 1

Это будет делать то, что вы хотите. Инструкция console.log предназначена для Firebug. Просто замените его вашим кодом, который использует массив.

$(".leaf").click(function(){
   var $this = $(this),
       array = $.map(
         $this.add($this.parents(':not(:has(div.top))')), 
         function(n){ return n.className }
       ).reverse();

   console.log( array );
});

Выводит это при нажатии:

["top", "branch", "branch", "leaf"]

Обновление

Чтобы исключить top из результата, просто немного измените селектор:

$(".leaf").click(function(){
   var $this = $(this),
       array = $.map(
         $this.add($this.parents(':not(:has(div.top)):not(div.top)')), 
         function(n){ return n.className }
       ).reverse();

   console.log( array );
});

Выводит это при нажатии:

["branch", "branch", "leaf"]

Answer 2

простой $('.leaf').parents().get() даст вам массив всех родителей в обратном порядке.

$('.leaf').add($('.leaf').parents()).not(':has(.top)').get().reverse().map( function(e) {
    return $(e).attr('class');
});

даст вам нужный массив.

Это, вероятно, достаточно значительная сложность, так что было бы целесообразно сделать его плагином, если вы планируете его много использовать.

Answer 3

, если вы хотите перейти к родителю, используйте вызов parent ()

http://docs.jquery.com/Traversing/parent

Вам также могут понравиться родители (), которые вернут вам список всех родителей:

http://docs.jquery.com/Traversing/parent

если вы хотите отказаться, вам придется использовать children () [для вашего случая у каждого элемента есть только один дочерний элемент]

http://docs.jquery.com/Traversing/children#expr

общие опции обхода в jquery:

http://docs.jquery.com/Traversing

Answer 4

$('div.leaf').click(function() {
   $(this).parents('div.top'); // This will get you the top-level div
   $(this).parents('div.branch'); // This will get you all the branches
});

EDITED

Это предполагает, конечно, что нет других div.top и div.branch, которые являются родителями указанного вами дерева.

Answer 5

это целый раздел в документации JQuery, который описывает, как пройти через DOM. проверить это здесь http://docs.jquery.com/Traversing