我需要获取元素的 ID,但该值是动态的,只有它的开头始终相同。
这是代码的片段。
<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">
ID始终以poll-
数字开头,然后数字是动态的。
如何仅使用 JavaScript 而不是 jQuery 获取 ID?
我需要获取元素的 ID,但该值是动态的,只有它的开头始终相同。
这是代码的片段。
<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">
ID始终以poll-
数字开头,然后数字是动态的。
如何仅使用 JavaScript 而不是 jQuery 获取 ID?
document.querySelector('[id^="poll-"]').id;
选择器的意思是:获取属性[id]
以字符串开头的元素"poll-"
。
^
匹配开始
*
匹配任何位置
$
匹配结束
试试这个。
function getElementsByIdStartsWith(container, selectorTag, prefix) {
var items = [];
var myPosts = document.getElementById(container).getElementsByTagName(selectorTag);
for (var i = 0; i < myPosts.length; i++) {
//omitting undefined null check for brevity
if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
items.push(myPosts[i]);
}
}
return items;
}
示例 HTML 标记。
<div id="posts">
<div id="post-1">post 1</div>
<div id="post-12">post 12</div>
<div id="post-123">post 123</div>
<div id="pst-123">post 123</div>
</div>
叫它像
var postedOnes = getElementsByIdStartsWith("posts", "div", "post-");
演示在这里:http : //jsfiddle.net/naveen/P4cFu/
querySelectorAll
与现代枚举polls = document.querySelectorAll('[id ^= "poll-"]');
Array.prototype.forEach.call(polls, callback);
function callback(element, iterator) {
console.log(iterator, element.id);
}
第一行选择所有以字符串id
开头的元素。第二行唤起了枚举和回调函数。^=
poll-
鉴于您想要的是仅根据前缀确定元素的完整 id,您将不得不搜索整个 DOM(或者至少,如果您知道一些,则搜索整个子树始终保证包含目标元素的元素)。您可以使用以下方法执行此操作:
function findChildWithIdLike(node, prefix) {
if (node && node.id && node.id.indexOf(prefix) == 0) {
//match found
return node;
}
//no match, check child nodes
for (var index = 0; index < node.childNodes.length; index++) {
var child = node.childNodes[index];
var childResult = findChildWithIdLike(child, prefix);
if (childResult) {
return childResult;
}
}
};
这是一个例子:http : //jsfiddle.net/xwqKh/
请注意,像您正在使用的那些动态元素 ID 通常用于保证单个页面上元素 ID 的唯一性。这意味着可能有多个元素共享相同的前缀。可能您想全部找到它们。
如果您想找到所有具有给定前缀的元素,而不仅仅是第一个,您可以使用类似于此处演示的内容:http : //jsfiddle.net/xwqKh/1/
我不完全确定我知道你在问什么,但你可以使用字符串函数来创建你正在寻找的实际 ID。
var base = "common";
var num = 3;
var o = document.getElementById(base + num); // will find id="common3"
如果您不知道实际 ID,则无法使用 getElementById 查找对象,您必须通过其他方式找到它(按类名、按标签类型、按属性、按父项、按子项、等等...)。
现在你终于给了我们一些 HTML,你可以使用这个普通的 JS 来查找 ID 以“poll-”开头的所有表单元素:
// get a list of all form objects that have the right type of ID
function findPollForms() {
var list = getElementsByTagName("form");
var results = [];
for (var i = 0; i < list.length; i++) {
var id = list[i].id;
if (id && id.search(/^poll-/) != -1) {
results.push(list[i]);
}
}
return(results);
}
// return the ID of the first form object that has the right type of ID
function findFirstPollFormID() {
var list = getElementsByTagName("form");
var results = [];
for (var i = 0; i < list.length; i++) {
var id = list[i].id;
if (id && id.search(/^poll-/) != -1) {
return(id);
}
}
return(null);
}