基于部分字符串的 Javascript getElementById

我需要得到一个元素的 ID,但是这个值是动态的,只有它的开头总是相同的。

Heres a snippet of the code.

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">

ID 总是以 poll-开头,然后数字是动态的。

如何只使用 JavaScript 而不使用 jQuery 获得 ID?

143043 次浏览

I'm not entirely sure I know what you're asking about, but you can use string functions to create the actual ID that you're looking for.

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);
}

You'll probably have to either give it a constant class and call getElementsByClassName, or maybe just use getElementsByTagName, and loop through your results, checking the name.

I'd suggest looking at your underlying problem and figure out a way where you can know the ID in advance.

Maybe if you posted a little more about why you're getting this, we could find a better alternative.

You use the id property to the get the id, then the substr method to remove the first part of it, then optionally parseInt to turn it into a number:

var id = theElement.id.substr(5);

或:

var id = parseInt(theElement.id.substr(5));

假设您想要根据前缀确定元素的完整 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;
}
}
};

Here is an example: http://jsfiddle.net/xwqKh/

请注意,动态元素 ID (如您正在使用的元素 ID)通常用于保证单个页面上元素 ID 的唯一性。这意味着可能有多个元素共享相同的前缀。也许你想把他们都找出来。

如果您想找到所有具有给定前缀的元素,而不仅仅是第一个,您可以使用类似于这里演示的 http://jsfiddle.net/xwqKh/1/

试试这个。

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-");

Demo here: http://jsfiddle.net/naveen/P4cFu/

你的 可以使用QuerySelector就是为了这个:

document.querySelector('[id^="poll-"]').id;

选择器的意思是: 获取一个元素,其中属性 [id]以字符串 "poll-"开头。

^与起点匹配
*匹配任何位置
$和结尾吻合

Jsfiddle

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">

ID 总是以‘ post-’开头,然后数字是动态的。

请检查您的 ID 名称,“投票”和“发表”是非常不同的。

如前所述,您可以使用 querySelector:

var selectors = '[id^="poll-"]';
element = document.querySelector(selectors).id;

但是如果您继续查询“ post”,querySelector 将找不到“ poll”: '[id^="post-"]'

具有现代枚举的 querySelectorAll

polls = document.querySelectorAll('[id ^= "poll-"]');
Array.prototype.forEach.call(polls, callback);


function callback(element, iterator) {
console.log(iterator, element.id);
}

第一行选择 id用字符串 poll-启动 ^=的所有元素。 第二行调用枚举和回调函数。

如果你需要最后一个 ID,你可以这样做:

var id_list = document.querySelectorAll('[id^="image-"]')
var last_id = id_list.length
alert(last_id)