Jquery - DOM内の要素の位置を取得

クリックしたときにDOM内の要素の位置を取得しようとしています。プレビューペインで選択した要素のフライスタイリングで生成するために使用することができます。例えばJquery - DOM内の要素の位置を取得

要素は私のような値を持つようにしたいクリックされたとき、私はページ内のすべての要素で実行されているonclickの機能を持っていると仮定すると：ユーザーが第三のスパンをクリックした場合

div#a > ul.list > li:nth-child(3) > span

を下記のページ：

<html> 
<body> 
    <div id="a"> 
     <ul class="list"> 
      <li><span>first</span></li> 
      <li><span>second</span></li> 
      <li><span>third</span></li> 
      <li><span>fourth</span></li> 
     </ul> 
    </div> 
</body> 
</html>

は、私は、Webを検索し、転がったいくつかの古い機能を試してみましたが、どれも動作するようには思えませんしました。

私は以下のようないくつかのコードを使用して、私がボディに衝突するまですべての親をループすることができますが、これは過剰と思われます。

$("body *").click(function() { 
    //retrieve current element information 
    //retrieve tag name 
    var tag = $(this).prop("nodeName"); 
    //retrieve id list 
    var ids = $(this).prop("id"); 
    //replace whitespace with hash 
    var ids = ids.replace(/\s/g, "#"); 
    //retrieve class list 
    var classes = $(this).attr("class"); 
    //replace whitespace with point 
    var classes = classes.replace(/\s/g, "."); 
    //add ids and classes to tag name 
    var current_element = tag + "#" + ids + "." + classes; 
});

もっと良い方法がありますか？

出典

2016-05-05 Alex

に役立ちます願っています。あなたは[elementsFromPoint]（https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint）を使用することができますが、そこにあるすべてのブラウザではまだサポートされていません（私はあなたを見ています）私はそれが実際に遅くなるかもしれないと思います。 –

可能な複製https://stackoverflow.com/questions/4588119/get-elements-css-selector-when-it-doesnt-have-an-id – flatline

可能な複製：http://stackoverflow.com/questions/5706837/get-unique-jqueryの要素のセレクタ – Riddell

その簡単な使用している間（...のparentNode）

var element = document.getElementById('elem'); 

    element.onclick=function(){ 
    var elem = this, 
     elemPath = ''; 

    while(elem.parentNode){ 
     elemPath += elem.tagName +' > '; 
     elem = elem.parentNode; 
    } 
    alert(elemPath); 
    }

私はそれは私がすべての親をループよりも高速に表示されていない

出典

2016-05-05 13:12:50 Marwan

Jquery - DOM内の要素の位置を取得

答えて

関連する問題