0

获取所有父元素的名称？

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

4

2 回答 2

3

它工作正常，而且非常清晰和直接。您唯一可以改进的是在每个类之前添加一个点：

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

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

于 2012-05-12T11:51:24.967 回答
1

它运作良好，我已经进行了一些测试，但没有人可以改进您当前的方法。

除了 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);
});

小提琴的例子在这里！

于 2012-05-12T12:06:56.717 回答