0

Trying to change the color on all the paths in an svg group except one path that has been given the class "static". I have tried both of the following:

$('.groupClass').children().not('.static').css('fill', '#FF0')

In this case, the not selector is ignored. All layers change color.

I have also tried:

$('.groupClass').children('not(.static)').css('fill', '#FF0')

In this case, color change stops working.

You can see the actual project here, to see the svg structure: http://www.thelionscall.com/wp-content/Temp/ i am trying to change the color on only the bloom of the rose.

Thank you for your help.

Kristi Simonson
  • 515
  • 1
  • 6
  • 22
  • SVG Dom doesn't play nice w jQuery selectors. See http://stackoverflow.com/a/5759456/165673 – Yarin Jul 23 '13 at 12:19

2 Answers2

7

The selector is preceded by a :

$('.groupClass').children().filter(':not(.static)').css('fill', '#FF0')

or simply:

$('.groupClass').children().not('.static').css('fill', '#FF0')
Alex
  • 9,911
  • 5
  • 33
  • 52
  • 2
    deleted my answer because apparently we had the same idea with the second one you provided. you should make it your primary; its far more efficient than the former. – PlantTheIdea Jun 10 '13 at 21:35
  • thats decent of you. i am just keeping it like that so you see the difference and the OP can see the "better" version towards his plan – Alex Jun 10 '13 at 21:37
  • As @PlantTheIdea said, `.not()` is the better (faster) choice. – matthewpavkov Jun 10 '13 at 21:38
  • I mistyped my post, showing the same method twice. I've tried this second version already. It's changing all the colors, and not ignoring the path I want it to. – Kristi Simonson Jun 10 '13 at 21:39
  • well maybe the .static elements are not children but rather deeper nested. instead of children() do .find('*'). always hard to tell without any code provided.. – Alex Jun 10 '13 at 21:40
  • 1
    @KristiSimonson then you should fix the question also post the svg structure so we can see what's wrong. – Musa Jun 10 '13 at 21:41
  • And using the filter method has the same result. It's like it doesn't see the class...here's the actual project. You'll have to use the arrow button to select the rose item and try changing the color. I'm trying to leave the leaf green while the bloom changes color...unless I've placed the class in completely the wrong path? http://www.thelionscall.com/wp-content/Temp/ – Kristi Simonson Jun 10 '13 at 21:41
  • I've tried it in both IE and Firefox. The leaf changes color with the rose...it should remain green. – Kristi Simonson Jun 10 '13 at 21:46
  • well your structure does not show any .groupClass, how shall we help you then!? – Alex Jun 11 '13 at 06:01
2

Shorten it up a bit:

$(".groupClass :not(.static)").css("fill", "#FF0");
tymeJV
  • 103,943
  • 14
  • 161
  • 157