jquery index() 方法问题按属性值选择答案

【问题标题】：jquery index() method problem selecting by attribute valuejquery index() 方法问题按属性值选择
【发布时间】：2011-10-25 11:39:56
【问题描述】：

有人可以发look at this吗？

您会看到第一个警报打印为 -1，而我期待的是 1。有人知道为什么吗？

小提琴的基本代码：

<input type="checkbox" value="0" />0
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
alert($(':checkbox').index("input[value='1']"));
alert($(':checkbox').index("input[value='0']"));

【问题讨论】：

旁注，只有 [value=0] 返回正确的索引。随后的值都是-1。
是的，通过其他属性选择似乎有效 --- 这是关于 value 属性的东西......

标签： javascript jquery jquery-selectors checkbox

【解决方案1】：

你的选择器颠倒了：

示例： http://jsfiddle.net/RaV35/

 // element---v    collection----------v
alert($("input[value='0']").index(":checkbox"));
alert($("input[value='1']").index(":checkbox"));

当向index()^[docs] 方法传递选择器时，您希望为其索引的单个元素是调用.index() 的元素。

您传递给.index() 的选择器表示用于测试原始jQuery 对象中的元素的集合。

当原始 jQuery 对象（左侧）还包含一个集合时，仅针对右侧选择器测试第一个对象的索引。这就是为什么 value="0" 起作用的原因。

 //   v--- only the first is tested (and it has value="0")...
$(':checkbox').index("input[value='0']")
 //   ----------------------^ ...and it is at index 0 of this "collection"

【讨论】：

这是正确的，并且稍微仔细阅读文档，是正确的行为。但是谈谈最小惊喜原则。这与大多数人期望它的工作方式相反。
@numbers1311407：我完全同意。他们已经有了$('selector').index(element)，但我想他们觉得有必要给一个简单的$('selector').index($('selector')); 提供捷径。在我看来，应该把它放在一边。
谢谢帕特里克——我认为 API 令人困惑（在这种情况下有点颠倒）但我看到你的阅读正确。
好电话。我以前从未使用过这种方法，并简要介绍了文档的要点。完全没有接受反转。 Ty 为启蒙运动。

【解决方案2】：

alert($(':checkbox[value='1']').index());
alert($(':checkbox[value='0']').index());

【讨论】：

alert($(':checkbox[value='0']').index());
原来的没有工作，因为 index() 没有被传递一个 jQuery 对象或 DOM 元素它被传递一个字符串。
来自文档：“如果我们使用字符串作为 .index() 方法的参数，它会被解释为 jQuery 选择器字符串。对象匹配元素中的第一个元素也匹配此选择器是位于。”此外，它似乎确实适用于“[value=0]”。
@Matt -- 它明确表示它将字符串解释为选择器

【解决方案3】：

你需要传递一个 jQuery 对象：http://jsfiddle.net/ybKzJ/1/

alert($(':checkbox').index($("input[value='1']")));
alert($(':checkbox').index("input[value='0']"));

编辑：

不，这似乎不对，因为第二个工作正常。

...好奇...

【讨论】：

如果你重新排列<input>，似乎只有第一个被识别。刚才我做了一些我重新排列它们的事情，它对这两个元素都有效，但是在刷新页面后它停止了。除了复制和粘贴来更改顺序之外，没有对 HTML 进行任何更改。
@numbers1311407：我认为是时候打开一个错误跟踪器了
我刚刚在 jsfiddle 之外实现了一个测试并得到了相同的结果。这似乎是一个错误。奇怪的是，在玩弄 jsfiddle 脚本时，经过一点复制和粘贴，它突然对我有用。不过，我没有改变任何重要的内容，也无法重现修复。

【解决方案4】：

我不确定我是否完全理解您为什么必须使用index()。为什么不把它全部放在选择器中：

$('input:checkbox[value="2"]');

你可以在这个小提琴中看到它的工作原理：http://jsfiddle.net/jfriend00/Xa6hA/

如果您确实想分多个阶段进行，那么我这样做会更合乎逻辑：

$('input:checkbox').filter('[value="3"]');

这会获取所有复选框，然后将列表过滤到带有value="3" 的复选框，这似乎比index() 的工作方式更直观。

【讨论】：

当您想要元素的索引 number 而不是元素本身时，您可以使用 .index()。