次のように私は2つのネストされた<code><svg></code>の要素を持っている要素はSVG要素

Question

の内側をクリック入手：

<svg id="main_svg"> 
    <svg data="business" id="something"> 
     <rect> 
      // Code for rectangle 
     </rect> 
    </svg> 
</svg> 

がどのように私はmain_svg内部<svg>タグのIDを取得することができますか？

私はthis.idでcontextmenuイベントハンドラを試してみましたが、それは常にmain_svgを返します。

$("svg").contextmenu(function(e) { 
    e.preventDefault(); 
    console.log(this.id); 
}); 

はどのようにこれを行うことができますか？より良いアプローチはありますか？どちらのイベントにも満足しています：onclickまたはcontextmenuです。

Answer 1

jQuery関数$('svg').find("> svg")を使用して、<svg>要素のすべての直接の子 - <svg>要素を見つけることができます。

$('svg').find("> svg").each(function() { 
    var id = $(this).attr("id"); 
    console.log(id); 
}); 

はjsFiddleを参照してください： https://jsfiddle.net/kyjn6z87/