Question

如果我正在解释元素的正确层次结构，我想要做的事情 ......

点击<ellipse>，<svg>和<object>的{{1}}子元素会向我显示您<div id="svg_*">父母的ID。

这*是因为<object>来自您各自的svg div。

这就是我的HTML结构，因为#DOCUMENT是由每个<ellipse>标记打开的window.frames。

<object>

现在，当我指定要使用的索引时，我可以访问<body> <div id="content"> <div class="header"></div> <nav class="nav"></nav> <div class="div 1"></div> <div class="div 2"> <div id="svg_1"> <object id="OneNameObject" data="../folder/fileOne.svg"> #DOCUMENT <svg> <ellipse>I have one addEventerLinster Click here</ellipse> </svg> </object> </div> <div id="svg_2"> <object id="TwoNameObject" data="../folder/fileTwo.svg"> #DOCUMENT <svg> <ellipse>I have one addEventerLinster Click here</ellipse> </svg> </object> </div> </div> <div class="div 3"></div> <div class="div 4"></div> </div>。

对于svg_1 #document
，
0 对于svg_2 #document
，
1

所以我想我会使用这个选择器来调用椭圆的雇佣。但我不能，而且我不知道如何。

类似的东西：

<object> id

这是我获取this.parent.document.querySelector('object').id;使用索引的方式，并且由此确定 - 我会从选定的id获取ID。

<object>

工作示例 \但在我的上下文中无效。

此代码正常运行，但不是我的上下文！需要获取该信息，我使用window.onload = function (){ //This is for addEventLinster on each <ellipse>. var obj = document.querySelectorAll('object'); for (var x = 0; x < obj.length; x++){ var svg = obj[x].contentDocument.querySelector('svg'); var e = svg.querySelectorAll('ellipse'); for ( var i = 0; i < e.length; i++){ e[i].addEventListener('click', function(){ var objId = parent.document.getElementsByTagName('object')[0].id; alert( objId ); }); } } };数据attr来加载svg文件，它们带有一个带有新窗口框架和新文档页面的嵌入标签。这就是为什么我不能让它们变得如此简单。

Image HTML Code / DOM painel - *详细信息：省略号位于<object>标记。

<g>

$(document).ready(function(){

         var obj = $('ellipse');      
         
         obj.on('click', function(){
         
         alert($(this).parents('object').attr('id'));
         
         });
                 
});

div {

width: 52px;
margin: 2px;
border-radius: 10%;
}

#svg_1:hover, #svg_2:hover {

opacity: 0.7;

}


#svg_1 {

border: 2px solid indianred;

}

#svg_2 {

border: 2px solid lightblue;

}

PS;我发现问题的标题有点令人困惑，如果有人有更好的建议，我会很感激！

Answer 1

试试下面的内容。（不是经过测试的代码，但理想情况下应该可以工作，除非有一些语法问题）我们可以检查是否可以删除不必要的东西。

$.each($('[id^="svg_"]'),function(){
    var eclipse = $(this).find("object").find('svg').find('ellipse'); 
     console.log(eclipse) 
   $(eclipse).click(function (){
     alert($(this).parent().parent().attr('id'))
   })
});

单击ellipse元素时如何获取父对象ID？

1 个答案: