基于部分字符串的Javascript getElementById

Question

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

这是代码的 sn-p。

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

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

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

Answer 1

你can usequerySelector：

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

选择器的意思是：获取属性[id]以字符串"poll-"开头的元素。

^ 匹配起点
* 匹配任意位置
$ 匹配终点

jsfiddle

Answer 2

试试这个。

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 3

querySelectorAll 使用现代枚举

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

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

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

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 的唯一性。这意味着很可能有多个元素共享相同的前缀。可能你想找到它们。

如果您想查找具有给定前缀的所有元素，而不仅仅是第一个，您可以使用此处演示的内容：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 查找对象，您必须通过其他方式找到它（按类名、标签类型、属性、父项、由孩子等...）。

现在您终于给了我们一些 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 名称，“poll”和“post”有很大不同。

正如已经回答的，您可以使用 querySelector：

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

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