用jQuery選擇包含的文檔元素

我有一個page我試圖從svg文檔中拉出圖層名稱並製作滑動菜單來控制它們的可見性。用jQuery選擇包含的文檔元素

我的頁面看起來像：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>665 Riddle Creek</title> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery"></script> 
    <link rel="stylesheet" type="text/css" href="css" /> 
    </head> 
    <body> 
    <nav/> 
    <object id="map" type="image/svg+xml" data="svg"></object> 
    </body> 
</html>

我想從SVG拉層和nav創建列表。我無法從svg中選擇圖層。我試過以下內容：

$('[inkscape\\:groupmode="layer"]', $('#map').first().contextDocument) 
$($('#map').first().contextDocument).find('[inkscape\\:groupmode="layer"]') 
$('#map').contents().find('[inkscape\\:groupmode="layer"]')

所有方法都返回0個元素。我該怎麼辦？

我爲這個問題創建了一個jsFiddle，我的問題似乎源於contentDocument被設置爲一個空的html文檔而不是我的svg。

來源

2014-01-13 Will

請發表您的文檔的相關部分在這裏，不只是一個鏈接它。 –

你能發佈相關的html嗎？ – tymeJV

顯然，當調用jQuery.ready處理程序時，svg文檔不一定會加載。我可以用下面的代碼來訪問文檔：

$(function() { 
    var svgElem = document.getElementById("map") 
    svgElem.addEventListener('load', function() { 
     var svg = this.contentDocument 
     $('nav').append(layersList($(svg.documentElement))) 
    }, false) 
})

該函數生成列表他們的樣子：

function layersList($root) { 
    var $children = $root.children('[inkscape\\:groupmode="layer"]') 
    var $list = $('<ul/>') 
    $children.each(function() { 
     ⋮ 
    }) 
    return $list 
}

來源

2014-01-13 18:58:11 Will

用jQuery選擇包含的文檔元素

回答

相關問題