Получение точного DOM TREE для кликаемого элемента

Question

Я пытаюсь получить точную DOM TREE до щелкающего элемента.Если вы попробуете это, вы увидите, что это работает.Но не совсем верно.Он не отделяет щелчок .container первого DOM от второго элемента DOM.Что я должен сделать, чтобы получить точное дерево DOM для выбранного элемента?

https://codepen.io/anon/pen/qJoVYo

$(document).ready(function() {

  $('*').click(function() {
    var el = $(this);
    createDOMTree(el);
  });

  function createDOMTree(element)
    {
        var parents = element.parents();
        var count = parents.length - 1;
        var tree = '';

        for(i=count;-1 < count--;i--) {
            var element = $(parents[i]);
            tree += getElementDOM(element);
        }

        return tree;
    }

    function getElementDOM(element)
    {
        var dom = element.prop('nodeName');
        var id = element.attr('id') ? '#'+element.attr('id') : '';
        var classes = element.attr('class') ? '.' + element.attr('class').replaceAll(' ', '.') : '';
        var index = $(dom + classes).index($(dom + classes));
        var eq = (index > 0 && index != 0) ? ':eq('+index+')' : '';

        if(dom === 'BODY')
        {
            eq = '';
        }

        return dom + classes + eq + ' ';
    }
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
    };
});

Answer 1

Измените свой индекс на:

var index = element.index();

, и если вы хотите получить точность

 if(element.siblings().length) {
    var eq = ':eq('+index+')';
  } else {
     var eq = (index > 0 && index != 0) ? ':eq('+index+')' : '';
  }

, чтобы получить li, вам нужно вызвать getElementDOM для элемента, по которому щелкнули

var inner = getElementDOM(element);

и затем добавьте его в конец дерева tree+= inner;

используйте оператор > для дальнейшей дифференциации ваших элементов

if(dom != "HTML") dom =  "> "+dom;

демо