如何仅使用javascript获取名称属性以特定值结尾的输入元素?
我发现这个$('input[name$="value"]')
方法在jQuery中可用。
javascript中是否有类似的功能?由于某种原因,我不能使用 jQuery。
如何仅使用javascript获取名称属性以特定值结尾的输入元素?
我发现这个$('input[name$="value"]')
方法在jQuery中可用。
javascript中是否有类似的功能?由于某种原因,我不能使用 jQuery。
我很惊讶没有人提到这一点。你有没有尝试过:
var elements = document.querySelectorAll('input[name$="value"]');
这仅在浏览器支持该querySelectorAll
方法时才有效,但如果找到支持,它就是 jQuery 在下面使用的。
下表列出了该方法的浏览器支持:
你可以这样做:
console.log(document.getElementsByName("value")[0]);
或者,如果您想查找input
名称中包含“值”的第一个元素:
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);
我将假设您已将这些<input>
元素放置在它们所属的位置(在<form>
元素中)。
通过 DOM API 遍历表单控件的最简单方法是通过. 它允许命名遍历,这对于特定元素非常方便。HTMLFormElement::elements
HTMLCollection
例如,考虑以下标记:
<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>
之后,需要一些简单的文档树遍历。这是它的全部内容:
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);
正如你所看到的,这真的不是太难。使用HTMLCollection
s 的结果是支持新旧浏览器。由于HTMLCollection
s 是在 DOM 0 中实现的,因此它们得到了广泛的支持。
将来,我建议使用不那么模糊的遍历。如果您控制正在遍历的文档树(即您编写了标记),您应该已经知道name
控件的 s。否则,必须使用像前面这样的模糊方法。
工作示例:http: //jsbin.com/epusow
更多内容,可以细读这篇文章。
此方法返回一个元素数组
var elements = document.getElementsByName("value");