選択した要素のツリー

Question

選択した要素のセレクタにアクセスしたいと思います。

<div id="parent"> 
<div class="foo"> 
    <div id="bar" onclick="bla()"> 
    change red 
    </div> 
</div> 
</div> 

<div id="parent2"> 
<div class="foo"> 
    <div id="bar" onclick="bla()"> 
    change blue 
    </div> 
</div> 
</div> 

私は

#parent .foo #bar 

を選んだ要素私はそれ以上のことができるので、それを直接アクセスできるようにしたいです。

function bla(){ 

return el.getElementsByTagName('*'); 

} 

私が望む結果を確認し

1. #bar => #parent .fooという

2. #bar =>＃parent2 .fooという

#bar感謝#barあなた

Answer 1

あなたはyoureの答えは以下の通りですとにかく、より多くの、1つの要素のために

を同じIDを使用しないでください。

<div id="parent"> 
    <div class="foo"> 
     <div id="bar" onclick="bla(this)"> 
      change red 
     </div> 
    </div> 
</div> 

<div id="parent2"> 
    <div class="foo"> 
     <div id="bar" onclick="bla(this)"> 
      change blue 
     </div> 
    </div> 
</div> 

<script type='text/javascript'> 
    function bla(e) { 

     // ID of clicked item 
     var elementId = e.id; 
     var divBarParent = e.parentElement 
     var divFooParent = divBarParent.parentElement 

     // You can access this elements directly 
     // by calling divBarParent & divFooParent 

     var divId = divFooParent.id; 
     console.log("#bar=> #" + divId + ".foo #" + elementId); 
    } 
</script>