Avatar of 93jordanaj
93jordanaj
Flag for United Kingdom of Great Britain and Northern Ireland asked on

How do I use the jQuery click function to get the ID of a parent if a child is clicked?

I have an SVG with grouped elements. The parent group <g> has an ID. When the parent or any children are clicked I want this ID to be passed to the script.

I have the following which works perfectly if the parent with the ID is clicked, but not if any children are clicked. How should I modify the script so that if the parent or any children are clicked the parent ID is used?

$(document).ready(function(){ 
  $("svg g.room").click(function(event){
	var id = event.target.id.split('-')[1]
	alert(id);
  });
});

Open in new window


Snippet from the SVG:

<g class="room" id="room-120">
	<polyline fill="#B0DED6" points="366.3,151.2 366.3,206.9 314.4,206.9 314.4,151.2 332.2,151.2 334.2,151.2 366.3,151.2 	"/>
	<g>
		<path fill="#00AA8F" d="M329.5,170.3l-1.4,0.3l-0.4-1.4l2.3-0.7h1.2v8.1h-1.7V170.3z"/>
		<path fill="#00AA8F" d="M335.7,170.3l-1.4,0.3l-0.4-1.4l2.3-0.7h1.2v8.1h-1.7V170.3z"/>
		<path fill="#00AA8F" d="M343.6,168.5h1.6l3.4,8.1h-1.8l-0.7-1.8h-3.4l-0.7,1.8h-1.8L343.6,168.5z M345.4,173.2l-1.1-2.6l-1.1,2.6
			H345.4z"/>
	</g>
</g>
<g class="room" id="room-121">
		<path fill="#1D1D1B" d="M328.5,190.6h1.9v-6.1c-0.3,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.6,0-0.8-0.1V184c1,0,1.9-0.4,2.3-1h0.7v7.6h1.8
			v0.7h-4.8V190.6z"/>
		<path fill="#1D1D1B" d="M337.1,187.6c1.3-0.8,2-1.4,2-2.5c0-1-0.6-1.7-1.7-1.7c-0.8,0-1.4,0.4-1.7,0.9c0.4,0.1,0.6,0.4,0.6,0.8
			c0,0.4-0.3,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-1c0-1.1,1.2-2.1,2.8-2.1c1.8,0,2.7,1.1,2.7,2.4c0,1.2-0.9,2-2.5,2.8
			c-1.5,0.8-2.1,1.4-2.3,2l0,0c0.3-0.2,0.7-0.3,1.1-0.3c0.9,0,1.6,0.7,2.2,0.7c0.6,0,0.9-0.5,1.2-1.8l0.5,0
			c-0.2,2.1-0.9,2.8-1.9,2.8c-1.1,0-1.7-1.1-2.5-1.1c-0.1,0-0.3,0-0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.4c0,0.4-0.2,0.7-0.6,0.7
			c-0.5,0-0.7-0.4-0.7-0.9C334.6,189.7,335.4,188.7,337.1,187.6z"/>
</g>

Open in new window


I appreciate this is last thing on a Friday (UK time) but this is quite urgent for a deadline early next week so I'll be working on this over the weekend. Any help would be really appreciated.

Alex
jQueryJavaScript

Avatar of undefined
Last Comment
Md Shah

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Md Shah

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Md Shah

Or You can also try..

$(document).ready(function(){ 
  $("g").click(function(event){

	var id = '';	

	if($(this).hasClass('room')) 
		id = $(this).attr('id'); 
	else
		id = $(this).closest('g.room).attr('id');
	
	id = id.split('-')[1];

	alert(id);
  });
});

Open in new window

93jordanaj

ASKER
Fantastic, thank you so much! Such a quick reply and works perfectly. For anyone else who may use this, I had to add in a missing quote after the "g.room", but this made it work as needed. Thank you.
93jordanaj

ASKER
Thanks for the second example. Is one any better than the other? If so I'd be happy to go with your recommendation, otherwise the first works exactly as needed.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Md Shah

Any time...

Happy I was helpful...!!!

Good Luck with your deadline next week :-)
Md Shah

Nothing much... Its just beauty of JQuery to provide multiple ways for a single issue ;-)