jQuery eq函数意外行为

Question

我在我编写的程序中发现了一个错误，但错误的行为对我来说是无法解释的：

如果我有：

<input type="text" name="cust_id" value="666" />
<input type="text" name="phone[]" value="666" />

然后使用此选择器：

var test = $("input[name=phone[]]:eq(0)");
test.css("color", "red");

我明白这一点：

我感到惊讶的是eq(0)选择了第一个输入这一事实，即使我明确告诉它只找到name=phone[]

的输入

这是一个小提琴：https://jsfiddle.net/1xdnv1t8/

这是预期的行为吗？ eq选择器是否忽略属性选择器？

Answer 1

您需要引用name属性：

var test = $("input[name='phone[]']:eq(0)");

因为phone[]不是没有引号的有效名称。所以jQuery解析器（或DOM）只是忽略了所有无效的东西，并将选择器看作只是input[name='phone']:eq(0)。另外值得注意的是，看起来这种行为在更新的jQuery版本中得到了修复。你在演示中使用相当旧的1.6.4，但是如果你用1.8.x及以上版本检查它，它将正常地抛出错误。

例如，如果您尝试

try {
  document.querySelector("input[name=phone[]]")
}
catch(e) {
  alert(e.message)
}

它甚至会抛出错误

  

Uncaught SyntaxError：无法在'Document'上执行'querySelector'：'input [name = phone []]'不是有效的选择器。

但jQuery更宽容，它只是选择它可以。

Answer 2

使用

var test = $("input[name='phone[]']:eq(0)");

JSFiddle

在selector especification州

  

jQuery（“[attribute ='value']”）

     

属性：属性名称。

     

value ：属性值。 可以是不带引号的单个字或带引号的字符串。

Answer 3

您缺少属性值周围的引号。试试这个 -

var test = $('input[name="phone[]"]:eq(0)');

Answer 4

选择器中的方括号会混淆属性选择部分，因为它没有引用。请注意，如果您将第二个输入的名称更改为phone，那么works as expected：

$("input[name=phone]:eq(0)")

或者，将属性选择器包装在引号中：

$("input[name='phone']:eq(0)")

Answer 5

虽然引用name属性的值并不是严格要求的（大多数情况下jQuery在没有它们的情况下工作正常），正如您所注意到的那样，当涉及非字母数字字符时，您可能会遇到异常情况并且jQuery将它们解释为CSS表示法。

解决方案是始终正确地转义任何这些字符（:，.，[，]等），如jQuery建议的那样，带有两个反斜杠：

  

为了告诉jQuery从字面上理解这些字符   而不是CSS表示法，他们必须逃脱＆＃34;放两个   在他们面前的反斜杠。

因此，根据jQuery文档，您应该使用var test = $("input[name='phone\\[\\]']:eq(0)");作为选择器（尽管在您的情况下简单地正确引用字符串也可以正常工作）。

<强> jsFiddle example

参考：How do I select an element by an ID that has characters used in CSS notation?