Question

获取所有父元素的名称？

 $(document).on('click', function(e){
    var parents = $(e.target).parents().map(function(){ 
        var $this = $(this),
            $id = $this.prop('id') ? '#'+$this.attr('id') : '',
            $class = $this.prop('class') ? '.'+$this.attr('class') : ''; 
        return this.tagName.toLowerCase()+$id+$class;
        }).get().join(" < ");
    prompt('The path to the element, Luke:',parents);
 });

FIDDLE示例。

编辑：很好！多谢你们！更新了FIDDLE。

Answer 1

它工作正常，而且很清楚＆amp;直forrward。你唯一可以改进的是在每个类之前添加一个点：

$class = $this.prop('class') 
             ? '.'+$.trim($this.attr('class')).replace(/\s+/g,'.') 
             : '';

这是一个现场演示：http://jsfiddle.net/cdWXN/1/

Answer 2

效果很好，我已经进行了一些测试，没有一个能够改进你当前的方法。

除了gion_13提供的建议外，我建议改变显示元素的顺序！

根据您的目标，使用.reverse()可能会提高从HTML到点击元素的可读性：

$(document).on('click', function(e){
  var parents = $(e.target).parents().map(function(){

    var $this  = $(this),
        $id    = $this.prop('id') ? '#'+$this.attr('id') : '',
        $class = $this.prop('class') 
                   ? '.'+$.trim($this.attr('class')).replace(/\s+/g,'.') 
                   : '';

    return this.tagName.toLowerCase()+$id+$class;

  }).get().reverse().join(" > ");

  prompt('The path to the element, Luke:',parents);
});

小提琴示例here!

有没有更好的方法来获取所有父元素的名称？

2 个答案: