使用jQuery选择包含的文档元素_Jquery_Dom_Svg

使用jQuery选择包含的文档元素

jquery dom svg

使用jQuery选择包含的文档元素,jquery,dom,svg,Jquery,Dom,Svg,我尝试从svg文档中提取图层名称，并制作一个滑动菜单来控制它们的可见性我的页面看起来像： <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/jq

我尝试从svg文档中提取图层名称，并制作一个滑动菜单来控制它们的可见性

我的页面看起来像：

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

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

所有方法都返回0个元素。我该怎么办

我为该问题创建了一个，我的问题似乎源于

contentDocument

被设置为空html文档，而不是我的svg。

显然，调用

jQuery.ready

处理程序时不必加载svg文档。我可以使用以下代码访问该文档：

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

用于生成列表的函数如下所示：

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

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

功能层列表（$root）{
var$children=$root.children（“[inkscape\\：groupmode=“layer”]”）
var$list=$（“”）
$children.each（函数（）{
⋮
} )
返回$list
}

请在此处发布文档的相关部分，而不仅仅是链接。您可以发布相关的html吗？