jQuery获取指定ID的SVG内的所有元素

Question

我使用this jQuery plugin将SVG图像加载到div中。我想从SVG XML数据中获取包含ID属性的所有元素ID。例如，在我的SVG图像中，我有circle和polygon元素具有ID属性，但rect元素没有ID属性。我想从XML中获取这两个ID。

我该怎么做？

我在onLoad函数的svg方法中试过这个。

$("#image svg").each(function() {
    $("#list").append("<option>" + this.id + "</option>");
});

#image是svg元素的容器，#list是select标记。

Answer 1

假设SVG已正确添加到页面中，您可以使用"has attribute selector"选择具有ID的所有元素：

$("#imag > svg [id]").each(function() {
    $("#list").append("<option>" + this.id + "</option>");
});

Answer 2

你确定它不起作用吗？

我已使用您的代码

创建了fiddle

$("#image svg").each(function() {
    $("#list").append("<option>" + this.id + "</option>");
});    

它看起来很好。

编辑：用第二行替换：

$("#list").append("<option style='display:" + ((this.id.length>0)?'inline':'none') + ";'>" + this.id + "</option>");

仅显示具有ID的那些。或者只是在附加选项标签之前检查（长度> 0或其他东西）（以后可能更容易理解/修改，我只想使用三元运算符：p）