1

Problem: using JQuery on HTML elements with Ids containing special characters. Any special characters can be present anywhere within the Id. In 90% of the cases those are going to be spaces, full stops and dashes.

I think I found a Possible solution but can’t find any documentation that would support this.

Let’s say sElementId is an html element Id that has special characters in it. Using the following syntax doesn’t work:

$('#'+sElementId).addClass("pointer");

but adding a pair of square brackets works like a charm:

$(['#'+sElementId]).addClass("pointer");

My question is. Is this the correct use of square brackets inside the selector?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Dmitri
  • 11
  • 1
  • 2
    IDs aren't supposed to have spaces in HTML. So if you can change that, that solves the root of the problem instead. – ADyson Oct 02 '20 at 14:50
  • Ok. Thanks. I can deal with spaces but still is this the valid way of using [ ] in JQuery selector? – Dmitri Oct 02 '20 at 14:56
  • Well, define "valid". Does it work for your purpose? Are there any issues you've noticed? – ADyson Oct 02 '20 at 14:59
  • It works absolutely fine. I just can't fine any documentation or code examples that would support the use of square brackets in that manner. – Dmitri Oct 02 '20 at 15:14
  • Well it's essentially an attribute selector. and id is an attribute. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors . https://api.jquery.com/attribute-equals-selector/ . Normally it would be done as `[id=...`, but if `[#...` also works then great. Although...are you putting the `[` outside the string, or inside it? I've just noticed your example it seems to be outside, but wasn't sure if that was definitely what you meant? – ADyson Oct 02 '20 at 15:15
  • That's what confused me. In my case square brackets are outside the string. Normally you'd have them wrapped in single or double quotes. I guess it my case it it works - it works. – Dmitri Oct 02 '20 at 15:25
  • All that would do is wrap the string in an array. Makes no obvious sense why that would help. Perhaps some little bit of JS syntax I've overlooked. – ADyson Oct 02 '20 at 15:30
  • 1
    Are you sure that it actually works? (i.e. did you check that the `pointer` class is added to the element, and it's not added without that piece of code?) -- Also which version of jQuery are you using? – user202729 Oct 03 '20 at 10:19
  • Thank you both, ADyson and @user202729. Looks like using [ ] does not work 100%. It turns out I can build the grid where row Ids contain special characters but I'm unable to update them using JQuery. I guess the best solution will be to escape special characters in the first place, then build the grid and process it's elements. – Dmitri Oct 05 '20 at 11:20
  • Well, my guess was correct. I undeleted my answer. – user202729 Oct 05 '20 at 11:31

1 Answers1

0

Actually, it doesn't work, and does something you didn't expect.

From jQuery documentation:

jQuery( object )

object
Type: PlainObject
A plain object to wrap in a jQuery object.

So if you call $(["#a b"]) (or just $(["a"])) you'll get a jQuery wrapper object for that array-of-string. It looks like a typical jQuery selector object, but it isn't. addClass has no effect on that object.

$([1]).addClass("pointer") // no operation

To select the object, just use $(document.getElementById("a b")) ($() to convert it to a jQuery object).

Alternatively:

user202729
  • 3,358
  • 3
  • 25
  • 36