JQuery 和 SVG - 如何找到“g”标签答案

【问题标题】：JQuery and SVG - how to find the 'g' tagJQuery 和 SVG - 如何找到“g”标签
【发布时间】：2013-06-07 06:08:50
【问题描述】：

想象一下：

<svg>
    <g id="node1" class="node"></g>
    <g id="node2" class="node"></g>
</svg>

如何找到“g”标签，我希望可以点击所有标签，而不仅仅是“node1”或“node2”。我已经尝试过与此类似，但无法正常工作。

$('g').click(function(){
    alert("Hellooooo");
});

【问题讨论】：

【解决方案1】：

感谢 C-Link 我解决了这个问题。

为了确保我写的只有节点是可点击的：

$("svg").find("g.node").click(function(){
    alert("Lolol");
});

而且效果很好。

【讨论】：

【解决方案2】：

使用 find() 方法了解更多信息，请访问this

例如$("body").find("p").css("background-color","#f00"); 将所有正文的<p> 元素背景颜色设置为红色。

对于你的问题，试试这个：

$("svg").find("g").click(function(){

// your jquery code here

}
);

【讨论】：

非常感谢！欣赏它。
这是一个愚蠢的答案。 $('svg').find('g') 与 $('g') 完全相同，但多了一个不必要的方法调用。同样你可以使用$('p').css({...});。这里根本不需要find()。
@JamesDonnelly 如果在其他标签中也是“g”会发生什么，那么他只需要在“svg”中找到。
@C-Link g 只是一个有效的 SVG 标签。除非开发影子 DOM 站点（在当前状态下不太可能），否则 g 将始终是 svg 的子级。
对于平面 $('g')，但在处理 $('svg')[0].find('g') 来导航 DOM 树。