在 jQuery 中，如何通过 name 属性选择不同的元素？答案

【问题标题】：In jQuery, how can I select different elements by the name attribute?在 jQuery 中，如何通过 name 属性选择不同的元素？
【发布时间】：2010-12-18 00:22:28
【问题描述】：

我正在尝试遍历表单中的某些元素（收音机、文本框和选择框）并从每个元素中获取值。我按每个元素的名称进行循环（我认为我不能使用 ID，因为一组单选按钮都有不同的 ID，但都具有相同的名称）。

这里有 2 个选择器，包含我需要的所有元素：

$("input[name=" + prop + "]")
$("select[name=" + prop + "]")

prop 是循环迭代器。

我想在两个选择器上执行相同的操作，所以我尝试将它们组合起来：

$("input[name=" + prop + "]", "select[name=" + prop + "]")

但这没有用。

有没有办法在一个选择器中同时搜索输入元素和选择元素？

谢谢！

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

您只是犯了一个小错误：您将两个选择器声明为两个不同的参数，而不是一个带有逗号作为选择器一部分的参数：

$("input[name=" + prop + "], select[name=" + prop + "]")

您编写它的方式使用第二个选择器参数的元素作为解析第一个选择器参数的上下文。

【讨论】：

哇——我完全明白我做错了什么。我复制并粘贴了 2 个选择器来制作 1 个选择器，我完全搞砸了我的引号位置。感谢您接听！
您可能还想添加textarea，可能还想添加button。

【解决方案2】：

如果逗号包含在选择器字符串中，它将起作用。你也可以这样做

$("input, select").filter("[name=" + prop + "]")

这消除了写两次“[name=" + prop + "]”。

【讨论】：

【解决方案3】：

不要试图将你所做的一切硬塞到 jQuery 中。 DOM 1 级 HTML 标准为您提供了 HTMLFormElement.elements，这很容易、快速，并且不会像选择器字符串那样对 name 中的异常字符失败。

<form id="x" ...>
    <input type="text" name="foo" />
    <select name="foo"></select>
</form>

<script type="text/javascript">
    var prop= 'foo';
    var form= $('#x')[0];
    var foos= form.elements[prop];
    alert(foos.length+' '+foos[0].type+' '+foos[1].type);  // 2 text select-one
</script>

【讨论】：

这是一个很好的提示 - 实际上，我经常陷入这个陷阱。退后一步，记住 jQuery 所用的语言是很好的。
作为奖励，这将捕获其他不是输入或选择的表单字段（如文本区域），以防表单在某处发生更改。