jQuery 选择器 [name=value] 不起作用

Posted 2023-03-05

【中文标题】jQuery 选择器 [name=value] 不起作用

【英文标题】：jQuery Selector [name=value] doesn't work

【发布时间】：2012-04-27 10:29:35

【问题描述】：

我是 jQuery 的新手。我在使用 [name=value] 选择器时遇到了问题。 这是 html：

<input type="number"/>

很简单，对吧？ 这是JS：

$("input").val(100);
$("input[value='100']").val(200)​

结果是：脚本的第一行有效，但第二行无效。(Chrome, FF, IE9) 两条线都在 IE8 中工作。 这是怎么发生的？顺便说一句，我正在使用 jQuery1.7.2。或者你可以在http://jsfiddle.net/wzKNV/上测试上面的代码

【问题讨论】：

又快又脏，这是我会使用的方法。 val() 是属性而不是属性，这意味着属性选择器在这种情况下不起作用。我创建了一个 jsfiddle，并克隆了元素以向您展示分离。 jsfiddle.net/7PZdt

【参考方案1】：

如果

<input type="nubmer" disabled="disabled" value="100" />​ // your fiddle have no `value`

然后

$("input[value='100']").val(200)​​​​​​​

会起作用

【参考方案2】：

attribute-equals 选择器检查 attribute，但 .val() 仅更改属性，因此选择器看不到更新。

jQuery/Sizzle 默认使用的原生 querySelectorAll 方法强制执行这种“仅属性”行为。

如果你破坏了querySelectorAll 的选择器，所以必须使用 Sizzle，它会起作用...

// v------made it a non-standard Sizzle selector
$(":input[value='100']").val(200);

这是因为 Sizzle 选择器不一定符合 qSA 选择器。当然，这会稍微改变选择器的含义，但对说明很有用。

演示： http://jsfiddle.net/wzKNV/3/

---

要使用标准选择器（这是 IMO 的一个好主意），您可以使用 filter() 代替...

$("input").filter(function()  return this.value === '100'; )
          .val(200);

演示： http://jsfiddle.net/wzKNV/4/

【讨论】：

嗯，真的教会了我很多关于 jQuery 和 qSA 选择器的知识。

奇怪为什么原始代码中的两行都可以在 IE8 中工作，因为它还实现了 Selectors API。该浏览器中可能还发生了其他事情。

@BoltClock'saUnicorn：似乎在 IE8 中向元素 （或修改一个） 添加属性也会修改属性。 jsfiddle.net/9bCCR 甚至自定义属性也使用getAttribute 出现。 IE9 似乎运行正常。

这个答案解决了$("input:hidden[value=true]").length 的问题。将 IE 更改为 $("input:hidden").filter(function() return this.value === "true"; ).length。