JQuery and SVG - how to find the 'g' tag

Question

Imagine this:

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

How can I find the 'g' tag, I want that all tags could be clicked, and not just 'node1' or 'node2'. I've tried simular to this, but could not get it work.

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

Unable to replicate. `$('g').click()` works fine. http://jsfiddle.net/ZLnJw/ — James Donnelly, Jun 11 '13 at 12:01
Hmm, that's strange. I've tried it again and it works for me to. — Kungen, Jun 11 '13 at 13:12

Bhojendra Rauniyar · Accepted Answer · 2013-06-11T11:55:33.847

11

Use find() method for more info visit this

For eg $("body").find("p").css("background-color","#f00"); sets all body's <p> element background-color to red.

For your question try this:

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

// your jquery code here

}
);

edited Jun 11 '13 at 11:55

answered Jun 11 '13 at 11:49

Bhojendra Rauniyar

83,432
35
168
231

Thank you so much! Appreciate it. – Kungen Jun 11 '13 at 12:27
6

This... is a silly answer. `$('svg').find('g')` is exactly the same as `$('g')` but with an extra unnecessary method call. Equally you can just use `$('p').css({...});`. No need for `find()` here at all. – James Donnelly Jun 11 '13 at 13:14
1

@JamesDonnelly what happen if inside other tags is also "g" then he need to find within "svg" only. – Bhojendra Rauniyar Jun 12 '13 at 03:55
2

@C-Link `g` is only a valid SVG tag. Unless developing a shadow DOM site (which is unlikely in its current state), `g` will always be the child of `svg`. – James Donnelly Jun 12 '13 at 07:35
Oh! I don't know svg so I'd provided that answer. Anyway thanx. – Bhojendra Rauniyar Jun 12 '13 at 09:37
@JamesDonnelly also in his question he tried but not worked saying, why? I think here is find() method is right to choose. – Bhojendra Rauniyar Jun 12 '13 at 12:02
1

For flat – Alvin K. Jun 13 '13 at 18:26

score 2 · Answer 2 · answered Jun 11 '13 at 12:30

2

Thanks to C-Link I've solved this.

To be sure only the nodes are clickable I've wroted:

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

And it works fine.

answered Jun 11 '13 at 12:30

Kungen

607
1
11
24

1

+1. Don't deserve a downvote as it is good to know the long way and short way. As explained above, in some cases, you'd need the long method. – Alvin K. Jun 13 '13 at 18:28

JQuery and SVG - how to find the 'g' tag

2 Answers2

Linked