基于部分字符串的Javascript getElementById

Question

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

下面是代码片段。

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

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

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

Answer 1

你can use为querySelector：

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

鉴于您想要的是仅基于前缀来确定元素的完整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 4

我不完全确定我知道你在问什么，但你可以使用字符串函数来创建你正在寻找的实际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 5

<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 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

querySelectorAll和现代枚举

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

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

第一行选择id以poll-开头的所有元素。 第二行唤起枚举和回调函数。