單擊橢圓元素時如何獲取父對象ID？

Question

如果我要解釋正確的元素層次結構， 我想做的就是 ...

單擊該元素時， <svg> ， <object>和<div id="svg_*">元素<ellipse>向我顯示您<object>父級的ID。

* *是因為<ellipse>將來自您各自的svg div。

這就是我的HTML結構，＃DOCUMENT是每個<object>標簽打開的window.frames。

 <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>

現在，當我指定要使用的<object> id的索引時，就可以訪問它。

svg_1 #document為0

svg_2 #document為1

所以我以為我會使用這個選擇器來調用橢圓等級。 但是我做不到，我也不知道怎么做。

就像是：

this.parent.document.querySelector('object').id;

這就是我使用索引獲取id的方式，並且-可以肯定-我從選定的<object>獲取ID。

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

工作示例 \\但在我的上下文中不起作用。

這段代碼可以正常工作，但它不在我的上下文中！ 需要獲取該信息，我正在使用<object>數據屬性來加載svg文件，它們位於帶有新窗口框架和新文檔頁面的嵌入標簽上。 這就是為什么我不能讓它們如此簡單。

圖像HTML代碼/ DOM痛苦 -*詳細信息： <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; }

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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="redObject" data=""> <!-- #DOCUMENT --> <svg width="50" height="48" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <ellipse ry="14" rx="13" id="svg_2" cy="25" cx="25" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#cd5c5c" fill="#bf2a2a"/> </svg> </object> </div> <div id="svg_2"> <object id="blueObject" data=""> <!-- #DOCUMENT --> <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <ellipse ry="14" rx="13" id="svg_2" cy="25" cx="25" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#c95c5c" fill="#56aaff"/> </svg> </object> </div> </div> <div class="div 3"></div> <div class="div 4"></div> </div> </body> </html>

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'))
   })
});

單擊橢圓元素時如何獲取父對象ID？

問題描述

1 個解決方案

解決方案1
0 2018-02-22 18:21:05

單擊橢圓元素時如何獲取父對象ID？

問題描述

1 個解決方案

解決方案1 0 2018-02-22 18:21:05

解決方案1
0 2018-02-22 18:21:05