jQuery 中 $('input[name$="value"]') 的 Javascript 等价物？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10335231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript equivalent of $('input[name$="value"]') in jQuery?
提问by Vigneshwaran
How can I get an input element whose name attribute ends with a particular value using just javascript?
如何仅使用 javascript 获取名称属性以特定值结尾的输入元素？
I found this $('input[name$="value"]')method available in jQuery.
我发现这个$('input[name$="value"]')方法在jQuery 中可用。
Is there a function like that available in javascript? I cannot use jQuery for some reason.
javascript中是否有类似的功能？由于某种原因，我不能使用 jQuery。
回答by Justin Niessner
I'm surprised that nobody has mentioned this yet. Have you tried:
我很惊讶还没有人提到这一点。你有没有尝试过：
var elements = document.querySelectorAll('input[name$="value"]');
This will only work if the browser supports the querySelectorAllmethod but it is what jQuery uses underneath if support is found.
这仅在浏览器支持该querySelectorAll方法时才有效，但如果找到支持，它就是 jQuery 在下面使用的。
Here's the table that lists browser support for the method:
下表列出了对该方法的浏览器支持：
回答by Vigneshwaran
I'm going to assume that you've placed these <input>elements where they belong (in a <form>element).
我将假设您已将这些<input>元素放置在它们所属的位置（在一个<form>元素中）。
The easiest way to traverse form controls via the DOM API is via the HTMLFormElement::elementsHTMLCollection. It allows named traversal, which is very handy for specific elements.
通过 DOM API 遍历表单控件的最简单方法是通过. 它允许命名遍历，这对于特定元素非常方便。HTMLFormElement::elementsHTMLCollection
For example, consider the following markup:
例如，考虑以下标记：
<form action="./" method="post" name="test"
onsubmit="return false;">
<fieldset>
<legend>Test Controls</legend>
<input name="control_one" type="text"
value="One">
<input name="control_two" type="text"
value="Two">
<input name="control_three" type="text"
value="Three">
</fieldset>
</form>
Following that, some simple document tree traversal is required. Here's the entirety of it:
之后，需要一些简单的文档树遍历。这是它的全部内容：
var test = document.forms.test,
controls = test.elements;
function traverseControl(control)
{
var patt = /one$/,
match = patt.test(control.name);
if (match) {
// do something
console.log(control);
}
}
function traverseControls(nodes)
{
var index;
if (typeof nodes === "object" &&
nodes.length) {
index = nodes.length - 1;
while (index > -1) {
traverseControl(
nodes[index]
);
index -= 1;
}
}
}
traverseControls(controls);
As you can see, it really isn't too difficult. The upshot of using HTMLCollections is the support of browsers old and new. Since HTMLCollections were implemented in DOM 0, they're widely supported.
如您所见，这真的不是太难。使用HTMLCollections的结果是新旧浏览器的支持。由于HTMLCollections 是在 DOM 0 中实现的，因此它们得到了广泛的支持。
In the future, I'd suggest using traversal that's far less vague. If you're in control of the document tree being traversed (i.e. you wrote the markup), you should already know the names of controls. Otherwise, vague approaches like the preceding must be used.
将来，我建议使用远不那么模糊的遍历。如果您控制着被遍历的文档树（即您编写了标记），您应该已经知道name控件的s。否则，必须使用像前面那样的模糊方法。
Working example: http://jsbin.com/epusow
工作示例：http: //jsbin.com/epusow
For more, this articlecan be perused.
更多内容，可以阅读这篇文章。
回答by Elliot Bonneville
You can do this:
你可以这样做：
console.log(document.getElementsByName("value")[0]);
Or if you want to find the first inputelement with "value" in its name:
或者，如果您想查找input名称中带有“value”的第一个元素：
var searchString = "value";
var elems = document.getElementsByTagName('input'), wantedElem;
for(var i = 0, len = elems.length; i < len; i++) {
if(elems[i].name.lastIndexOf(searchString) == elems[i].name.length-searchString.length) {
wantedElem = elems[i];
break;
}
}
console.log(wantedElem);
回答by MatuDuke
This method returns an array of elements
此方法返回一个元素数组
var elements = document.getElementsByName("value");
