1

in my program i have a jquery line

$( '#monsters[0]').animate( { left: "+=25" },500);

i have a array called monsters, but i dont see why that would make a difference, this code does work when i change the id to a different images id, and i put ('img') instead it even works on the image with the id monsters[0] i am also sure this is the images id. however i run the above code and nothing happens to the image, no error appears in the console either, can anyone explain this?

link here, if that helps at all.

Math chiller
  • 4,123
  • 6
  • 28
  • 44
  • possible duplicate of [Obtain values of array with jquery](http://stackoverflow.com/questions/11457327/obtain-values-of-array-with-jquery) – JJJ Sep 01 '13 at 13:26

3 Answers3

5

The characters [ and ] have special meaning in a selector (they indicate an attribute selector). If you want to use them as part of an ID selector (or any other kind of selector) you have to escape them with a \.

Note that since you are expressing your selector as a string literal, you have to escape the escape sequences too.

'#monsters\\[0\\]'
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • very useful but in truth i needed `document.getElementById('monsters[0]')` (dystroy's answer) because im doing this dynamically that was just an example but really thank you – Math chiller Sep 01 '13 at 13:29
  • @tryingToGetProgrammingStraight — There is nothing stopping you dynamically adding ``\`` characters to a string, so you shouldn't need to avoid using selector syntax. – Quentin Sep 01 '13 at 13:30
  • your actually right after trying `document.getElementById('monsters[0]')` i realized im going to have to dynamically add escapes – Math chiller Sep 01 '13 at 13:32
  • can you make my life easier and tell me how i would best add those escapes or give me a link to an explanation please? – Math chiller Sep 01 '13 at 13:33
  • 1
    @tryingToGetProgrammingStraight — There's an example in the original answer. Once they are part of a string string, you treat them like any other character. – Quentin Sep 01 '13 at 13:34
  • i meant dynamically add them based on the position of `[` and `]` – Math chiller Sep 01 '13 at 13:35
  • `str.replace(/([\[\]])/g, '\\$1')` – Quentin Sep 01 '13 at 13:38
2

'#monsters[0]' can't be parsed by jQuery as meaning the element has an id "monsters[0]". It's parsed as a query for an element having as id monsters and an attribute 0.

You may do

$(document.getElementById('monsters[0]')).animate( { left: "+=25" },500);

If you use it more than once you can build yourself a small utility :

function $$(id) { return $(document.getElementById(id)) }

so that you only have to do 

$$('monsters[0]').animate( { left: "+=25" },500);

But you should probably avoid those id, they would for example bring you the same problem in CSS. Here it looks like a class or a data attribute would make more sense.

Comment :

There's of course the other solution of dynamically escaping the [ and ] characters (and later on the other ones that could arise). Don't do it : this makes the code much more complex, hides the fact that it works only for certain forms of id, and is much heavier : you build a string that jQuery will parse to understand you need the id and then jQuery will call document.getElementById. Direcly use document.getElementById to be clearer, more reliable and more efficient.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • @tryingToGetProgrammingStraight I detailed my explanation. Is that clear now ? – Denys Séguret Sep 01 '13 at 13:24
  • 1
    @trying Because jQuery uses the angle brackes like they are defined in CSS. As conditions, e.g. `a[href ^= 'https://']` (all links whose href starts with `https://`). You really should not have an element with the ID `monsters[0]` in the first place. Use `monsters_0` for example. – Tomalak Sep 01 '13 at 13:25
  • @Tomalak — You seem to be confusing square `[]` and angle `<>` brackets. "Conditions" isn't a very good term to use here, everything in a selector is a condition, they are attribute selectors. Why shouldn't he have an id like that in the first place? – Quentin Sep 01 '13 at 13:27
  • I'm not confusing square and angle brackets. I could have said "predicates" but that's just another word for "condition". Why you should not have an ID like this? Because it interferes with the systems you use. It makes it harder to write CSS and jQuery, for example. It clutters the code with unnecessary escaping and makes it harder to understand due to the use of programming symbols in inappropriate places. An ID is supposed to be a string, it should not look like a bit of code, for reasons of practicality and sensibility. – Tomalak Sep 01 '13 at 13:28
  • @Tomalak i purposely want it to be like code because i often use it as code and just 1-2 times not – Math chiller Sep 01 '13 at 13:34
  • @tryingToGetProgrammingStraight As I was very surprised by your accept, I updated my answer with a comment. I hope it's clear. – Denys Séguret Sep 02 '13 at 06:35
  • 1
    @dystroy The third variant would be `$("*[id='monsters[0]']")`, which would work without escaping as well. In any case, the OP already confirmed my suspicion that the IDs contain angle brackets because he evals them at some point. This verifies my point - it's bad and wrong and the the OP should not be using stuff like this in the first place. – Tomalak Sep 02 '13 at 07:26
  • I'm with you on your comment (the star is useless in that selector). But building a selector and then ask jQuery to parse it is ugly in my opinion. – Denys Séguret Sep 02 '13 at 07:28
  • i will be honest you are right, however atm i am building games to help teach myself, there is no intent to keep them in the future. hence i used the first answer in my code, so i accepted it, i did 1+ you, and i appreciate it, but for this specific program i used the other answer so i then accepted it, hope that helps you understand. – Math chiller Sep 02 '13 at 07:41
  • @Tomalak it seems that your right, but is there another better way of doing it? its the only way i can see with dynamically created objects, which i need to later access through their image element. – Math chiller Sep 02 '13 at 09:13
  • @dystroy jQuery is all about building selectors and asking jQuery to parse them. It's all done by sizzle in the end anyway (yes, I know there is QSA, but not all jQuery does can by done with QSA). The issue here is in the approach, not in the tool. – Tomalak Sep 02 '13 at 09:55
  • @trying It's hard to answer without seeing what exact problem you are trying to tackle. If you can provide a stripped down sample of your current set-up on jsFiddle, I can try and suggest a better way. – Tomalak Sep 02 '13 at 09:57
  • @Tomalak i think what i was looking for is jquerys, `.data()` in order to store info on a element, (i started jquery on friday - 3 days ago and im self teaching ). i think it will work for what i want. – Math chiller Sep 02 '13 at 16:35
  • @Tomalak see this question please - http://stackoverflow.com/questions/18578160/how-to-connect-a-javascript-object-to-a-dynamically-created-html-element-inside – Math chiller Sep 02 '13 at 17:36
-4

$( '#monsters').animate( { left: "+=25" },500);

will do.

$( '#monsters') gives away a jQuery wrapped object.

Priya Ranjan Singh
  • 1,567
  • 1
  • 15
  • 29