Javascript getElementById основывается на частичной строке

Question

Мне нужно получить идентификатор элемента, но значение является динамическим, только начало его всегда одинаково.

Вот фрагмент кода.

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

Идентификатор всегда начинается с «poll-», тогда цифры являются динамическими.

Как получить идентификатор, используя только JavaScript, а не jQuery?

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

Учитывая, что вам нужно определить полный идентификатор элемента на основе только префикса, вам придется выполнить поиск по всему 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/

Имейте в виду, что идентификаторы динамических элементов, подобные тем, с которыми вы работаете, обычно используются для гарантии уникальностиидентификаторов элементов на одной странице.Это означает, что, вероятно, существует несколько элементов с одинаковым префиксом.Вероятно, вы хотите найти их всех.

Если вы хотите найти все элементы с заданным префиксом, а не только первый, вы можете использовать что-то вроде того, что показано здесь: http://jsfiddle.net/xwqKh/1/

Answer 4

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

Идентификатор всегда начинается с «post-», тогда цифры являются динамическими.

Пожалуйста, проверьте, что ваши имена идентификаторов, «poll» и «post» очень разные.

Как уже было сказано, вы можете использовать querySelector:

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

, но querySelector не найдет «poll», если вы продолжаете запрашивать «post»: '[id^="post-"]'

Answer 5

Я не совсем уверен, что знаю, о чем вы спрашиваете, но вы можете использовать строковые функции для создания фактического идентификатора, который вы ищете.

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

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

Если вы этого не сделаетеесли вы знаете фактический идентификатор, тогда вы не сможете найти объект с помощью getElementById, вам нужно будет найти его другим способом (по имени класса, по типу тега, по атрибуту, по родителю, по потомку и т. д.).

Теперь, когда вы наконец-то дали нам часть HTML, вы можете использовать этот простой JS, чтобы найти все элементы формы, у которых есть идентификатор, начинающийся с «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

Вы используете свойство id для получения идентификатора, затем метод substr, чтобы удалить его первую часть, а затем, необязательно, parseInt, чтобы превратить его в число:

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

или

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

Answer 7

Вам, вероятно, придется либо присвоить ему константный класс и вызвать getElementsByClassName, либо, возможно, просто использовать getElementsByTagName и просмотреть свои результаты, проверив имя.

Я бы посоветовал взглянуть на основную проблему и найти способ заранее узнать идентификатор.

Возможно, если вы напишете немного больше о том, почему вы получаете это, мы могли бы найти лучшую альтернативу.