-1

I am able to locate an element of an element through an id and add a class when the ID is hard coded, e.g:

var tableId = el.id;

$('#' + tableId).find("[id='Checkout On']").addClass('highlight');

However, I want to pass 'Checkout On' as a variable, e.g:

var tableId = el.id;
var childEl = col.id;

$('#' + tableId).find("[id=" + childEl + "]").addClass('highlight');

However this doesn't seem to work.

Update:

Completely understand IDs should not have spaces however this is not something I am able to resolve.

Oam Psy
  • 8,555
  • 32
  • 93
  • 157
  • 2
    You should fix the underlying issue: you can't have spaces in an `id` attribute, so the value itself is invalid. Your problem with the attribute selector is that you need to wrap the value in quotes. – Rory McCrossan Feb 01 '17 at 10:40

3 Answers3

2

You've left out the quotes in the version using the variable:

$('#' + tableId).find("[id='" + childEl + "']").addClass('highlight');
// ------------------------^---------------^

But note that an id with a space in it is invalid. From the spec:

3.2.5.1 The id attribute

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

(my emphasis)

That means that even if this works on one browser, there's no guarantee it'll work in another, or even in the next minor release of the one where it worked. (I bet it will, but there's no reason to tempt things like that...)

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Why selecting an element with ID using `"[id='" + id + "']"`. `"#" + id` is better. – ibrahim mahrir Feb 01 '17 at 10:54
  • @ibrahimmahrir: Except of course an ID selector's rules for what can be in the following ID are much more strict (making even various *valid* ID values tricky to use with the ID selector), and it doesn't work at all if there's a space in the ID. Also, it's not markedly better when used as above (in `find`), only when used in isolation (as the OP is with `$('#' + tableId)`). – T.J. Crowder Feb 01 '17 at 10:57
0

You should never use whitespaces for any id or class names. Go with snake_case or camelCase: checkout_on or checkoutOn

cyr_x
  • 13,987
  • 2
  • 32
  • 46
0

If you want to select an element with ID use the #... selector. It's better. Like this:

var tableId = el.id;
var childEl = col.id;

$('#' + tableId).find("#" + childEl ).addClass('highlight');

NOTE: IDs can not have spaces. Check this for more info.

Community
  • 1
  • 1
Sujin S
  • 21
  • 3
  • Why are people downvoting this? It's a correct answer. – ibrahim mahrir Feb 01 '17 at 10:52
  • @ibrahimmahrir: It's not a correct answer. If the ID has a space in it, this will fail. (*Yes*, the ID *shouldn't* have a space in it, but it does.) Moreover, there's no explanation. Answers without explanation are not *useful* answers. – T.J. Crowder Feb 01 '17 at 10:58