想象一下:
<svg>
<g id="node1" class="node"></g>
<g id="node2" class="node"></g>
</svg>
我该如何找到“g”标签?我希望所有标签都可以被点击,而不仅仅是“node1”或“node2”。我已经尝试过类似以下的方法,但无法使其正常工作。
$('g').click(function(){
alert("Hellooooo");
});
想象一下:
<svg>
<g id="node1" class="node"></g>
<g id="node2" class="node"></g>
</svg>
$('g').click(function(){
alert("Hellooooo");
});
使用find()方法获取更多信息,请访问此网页
例如:$("body").find("p").css("background-color","#f00");
将所有body元素中的<p>
元素的背景颜色设置为红色。
针对您的问题,请尝试以下内容:
$("svg").find("g").click(function(){
// your jquery code here
}
);
$('svg').find('g')
和 $('g')
是完全相同的,只是多了一个不必要的方法调用。同样地,你可以直接使用 $('p').css({...});
,这里根本不需要使用 find()
。 - James Donnellyg
是 SVG 标签中唯一有效的标签。除非正在开发一个影子 DOM 网站(在当前状态下不太可能),否则 g
将始终是 svg
的子元素。 - James Donnelly$('g')
,但当处理嵌套在<svg>内的<svg>时,我会使用$('svg')[0].find('g')
来导航DOM树。 - Alvin K.多亏了C-Link,我解决了这个问题。
为了确保只有节点可点击,我写了以下代码:
$("svg").find("g.node").click(function(){
alert("Lolol");
});
它运行良好。
$('g').click()
正常工作。http://jsfiddle.net/ZLnJw/ - James Donnelly