基于部分字符串的 Javascript getElementById

Question

我需要获取一个元素的 ID，但该值是动态的，只有它的开头始终是相同的。

这是代码片段。

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

ID 始终以 poll- 开头，然后数字是动态的。

如何仅使用 JavaScript 而不是 jQuery 获取 ID？

Answer 1

您可以使用querySelector 为此：

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

选择器意味着：
获取属性 [id] 以 (^=) 字符串 "poll-" 开头的元素。

^ 匹配开头
* 匹配任何位置
$ 匹配结尾的

示例

console.log(document.querySelector('[id^=poll-]').id)

<form id="poll-1225962377536"></form>

Answer 2

使用现代枚举的 querySelectorAll

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

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

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

Answer 3

试试这个。

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/

Answer 4

鉴于您想要的是仅根据前缀确定元素的完整 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）通常用于保证单个页面上元素 ID 的唯一性。这意味着很可能有多个元素共享相同的前缀。也许您想找到全部。

如果您想查找具有给定前缀的所有元素，而不仅仅是第一个元素，您可以使用类似于此处演示的内容： http://jsfiddle.net/xwqKh/1/

Answer 5

我不完全确定我知道你在问什么，但你可以使用字符串函数来创建你正在寻找的实际 ID。

var base = "common";
var num = 3;

var o = document.getElementById(base + num);  // will find id="common3"

如果您不知道实际的 ID，则无法使用 getElementById 查找对象，您必须以其他方式查找它（按类名、按标签类型、按属性、按父级、按子级， ETC...）。

现在您终于给了我们一些 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);
}

Answer 6

您可能必须给它一个常量类并调用 getElementsByClassName，或者只使用 getElementsByTagName，然后循环遍历结果，检查名称。

我建议您看看您的根本问题，并找出一种可以提前知道 ID 的方法。

也许如果您发布更多有关为什么会收到此信息的信息，我们可以找到更好的替代方案。

Answer 7

您可以使用 id 属性获取 id，然后使用 substr 方法删除它的第一部分，然后可选地使用 parseInt 将其转换转换为数字：

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

或：

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

Answer 8

<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-"]'

Answer 9

如果您需要最后一个 id，您可以这样做：

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