Question

我正在尝试获取精确的DOM TREE，直到单击元素为止。如果您尝试它，您将看到它有效。但并不完全正确。它不会将click .container第一DOM与第二DOM元素分开。我该怎么做才能为所选元素获取精确的DOM树？

$(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;

demo

为单击的元素获取精确的DOM TREE

1 个答案: