Question

I have a strange behaviour, maybe I’m missing something.

I have this DOM element (Sharepoint Ribbon Element, but doesn’t matter) which I want to select with jQuery by ID:

<span class="ms-cui-row" 
id="Ribbon.EditingTools.CPEditTab.Font-Medium-0-0">...</span>

If I select it with the class name $('.ms-cui-row') I can select it but with the id I can’t $('#Ribbon.EditingTools.CPEditTab.Font-Medium-0-0'). I can’t even select it with $('[id="Ribbon.EditingTools.CPEditTab.Font-Medium-0-0"]').

So whats the point here? Maybe its not a good idea to use dots in an id name – but that was Microsoft not me and I can’t change it. But it seems to be ok for them?

I prepared a jsfiddle to play around with.

Answer 1

You can’t have . in a jQuery selector (except at the beginning of a class selector), since jQuery will assume it is referring to a class on the element. Escape it with \\.

Also, the id selector in jQuery is $("#id").

Your new selector:

$('#Ribbon\\.EditingTools\\.CPEditTab\\.Font-Medium-0-0')