CODEWITHSUNDEEP
javascriptjquerycsssvg
Smajl
Smajl

Reputation: 7995

Get element by class - with dashes

I am trying to access some svg elements on a page given their class name. However, it does not work, when the class name contains dashes. Is there some work around?

<svg width="100" height="20" class="123-456">
    <rect width="50" height="20" style="fill:red" />
</svg>
<svg width="100" height="20" class="567-345">
    <rect width="50" height="20" style="fill:red" />
</svg>
<svg width="100" height="20" class="123-456">
    <rect width="50" height="20" style="fill:red" />
</svg>

<br>
    <a href="#" onclick="highlightSVG(123-456)">highlight</a>

JS:

function highlightSVG(conversationid) {
    $('[class="' + conversationid + '"]').css('width','20');
}

Here is a link to fiddle: http://jsfiddle.net/93FHf/

It works if I remove the dashes but in that case, I would have to change some naming conventions in my project :-/

Upvotes: 0

Views: 197

Answers (4)

Nagesh Hunter
Nagesh Hunter

Reputation: 13

 <a href="#" data-myclass ='123-456' onclick="highlightSVG(this)">highlight</a>


function highlightSVG(conversationid) {
var colClass = $(el).data('myclass ');
}

try with custom data. bcz directly it will not take selector dashes

Upvotes: 0

kushal jain
kushal jain

Reputation: 147

you are passing in argument 123-456. When it is retrieved in Javascript it perform arithmetic operation and this result as -333.

you pass it as a string in argument than it will work for you.

Follow updated fiddle.

Upvotes: 3

Kodr.F
Kodr.F

Reputation: 14390

Change

   <a href="#" onclick="highlightSVG(123-456)">highlight</a>

To

   <a href="#" onclick="highlightSVG('123-456')">highlight</a>

And

$('[class="' + conversationid + '"]').css('width','20');

To

$('.'+conversationid).css('width','20');

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

It works if the value passed in for the function is quoted!

onclick="highlightSVG('123-456')"

You can also simply use the class selector rather than an attribute selector:

$("." + conversationid)...

Upvotes: 4

Related Questions