Find DOM element by ID when ID contains square bra

问题:

I have a DOM element with an ID similar to:

something[500]

which was built by my Ruby on Rails application. I need to be able to get this element via jQuery so that I can traverse my way up the DOM to delete the parent of it\'s parent, which has a variable ID that I don\'t have access to beforehand.

Does anyone know how I could go about this? The following code doesn\'t seem to be working:

alert($(\"#something[\"+id+\"]\").parent().parent().attr(\"id\"));

Upon further inspection, the following:

$(\"#something[\"+id+\"]\")

returns an object, but when I run \".html()\" or \".text()\" on it, the result is always null or just an empty string.

Any help would be greatly appreciated.

回答1:

You need to escape the square brackets so that they are not counted as attribute selectors. Try this:

alert($(\"#something\\\\[\"+id+\"\\\\]\").parent().parent().attr(\"id\"));

See Special Characters In Selectors, specifically the second paragraph:

To use any of the meta-characters (such as !\"#$%&\'()*+,./:;<=>?@[\\]^``{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\\\. For example, an element with id=\"foo.bar\", can use the selector $(\"#foo\\\\.bar\"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

回答2:

An id cannot include square brackets. It is forbidden by the spec.

Some browsers might error correct and cope, but you should fix you data instead of trying to deal with bad data.

回答3:

Square brackets have special meaning to jQuery selectors, the attribute filters specifically.

Just escape these and it will find your element fine

$( \"#something\\\\[\" + id + \"\\\\]\" )

回答4:

You can also do

$(\'[id=\"something[\'+id+\']\"]\')

回答5:

Try this:

alert($(\"#something\\\\[\"+id+\"\\\\]\").parent()[0].parent()[0].attr(\"id\"));

回答6:

You can escape them using \\\\ or you could do something like this...

$(document.getElementById(\"something[\" + id + \"]\"))

回答7:

\"Any of the meta-characters

!\"#$%&\'()*+,./:;<=>?@[\\]^`{|}~

as a literal part of a name, it must be escaped with with two backslashes: \\\\.

For example, an element with id=\"foo.bar\", can use the selector

$(\"#foo\\\\.bar\")

\" [source: jquery doc], and an element with id=\"foo[bar]\" (even though not valid for W3C but recognised by JQuery), can use the selector

$(\"#foo\\\\[bar\\\\]\")

(Just an asnwer like the many others, but all together :))