JQuery和SVG - 如何找到'g'标签

Question

想象一下：

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

我该如何找到“g”标签？我希望所有标签都可以被点击，而不仅仅是“node1”或“node2”。我已经尝试过类似以下的方法，但无法使其正常工作。

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

- Kungen

---

无法复制。$（'g'）.click（）正常工作。http://jsfiddle.net/ZLnJw/ - James Donnelly

嗯，这很奇怪。我再试一次，现在它对我有效。 - Kungen

Answer 1

使用find()方法获取更多信息，请访问此网页

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

针对您的问题，请尝试以下内容：

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

// your jquery code here

}
);

- Bhojendra Rauniyar

---

这个回答有些荒谬。$('svg').find('g') 和 $('g') 是完全相同的，只是多了一个不必要的方法调用。同样地，你可以直接使用 $('p').css({...});，这里根本不需要使用 find()。 - James Donnelly

@JamesDonnelly 如果其他标签中也有"g"，那么他需要仅在"svg"内查找。 - Bhojendra Rauniyar

@C-Link g 是 SVG 标签中唯一有效的标签。除非正在开发一个影子 DOM 网站（在当前状态下不太可能），否则 g 将始终是 svg 的子元素。 - James Donnelly

哦！我不知道SVG，所以我提供了那个答案。无论如何，谢谢。 - Bhojendra Rauniyar

对于扁平的<svg>文档，请使用$('g')，但当处理嵌套在<svg>内的<svg>时，我会使用$('svg')[0].find('g')来导航DOM树。 - Alvin K.

Answer 2

多亏了C-Link，我解决了这个问题。

为了确保只有节点可点击，我写了以下代码：

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

它运行良好。

- Kungen

---

不应该被投反对票，因为知道长方法和短方法都是好的。如上所述，在一些情况下，你需要使用长方法。 - Alvin K.