为什么这个jquery不起作用？

Question

在我的程序中我有一个jquery行

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

我有一个名为怪物的数组，但我不明白为什么会产生影响，当我将id更改为不同的图像ID时，此代码确实有效，而我放('img')代替它甚至可以在身份monsters[0]的图片我也确定这是图片ID。但是我运行上面的代码，图像没有任何反应，控制台也没有出现任何错误，任何人都可以解释这个吗？

link here，如果这有帮助的话。

Answer 1

字符[和]在选择器中具有特殊含义（它们表示an attribute selector）。如果您想将它们用作ID选择器（或任何其他类型的选择器）的一部分，则必须使用\来转义它们。

请注意，由于您将选择器表示为字符串文字，因此您也必须转义转义序列。

'#monsters\\[0\\]'

Answer 2

jQuery无法解析

'#monsters[0]'，因为该元素具有标识"monsters[0]"。它被解析为对标识为monsters和属性0的元素的查询。

你可以做

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

如果您多次使用它，您可以自己构建一个小实用程序：

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

所以你只需要做

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

但你应该避免使用这些id，例如他们会在CSS中带给你同样的问题。这看起来像一个类或数据属性会更有意义。

---

评论：

当然还有动态转义[和]字符的其他解决方案（以及后来可能出现的其他字符）。不要这样做：这使得代码变得更加复杂，隐藏了它只适用于某些形式的id的事实，并且更重要：你构建一个jQuery将解析的字符串，以了解你需要id，然后jQuery将致电document.getElementById。直接使用document.getElementById更清晰，更可靠，更高效。

Answer 3

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

会做的。

$( '#monsters')赠送一个jQuery包装对象。