基于部分字符串的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-".

^匹配开始
*匹配任何位置
$匹配结束

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