База данных javascript getElementById на частичной строке
Мне нужно получить идентификатор элемента, но значение является динамическим, и только его начало всегда одинаково.
Вот фрагмент кода.
<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">
Идентификатор всегда начинается с "poll-", тогда числа являются динамическими.
Как я могу получить идентификатор, используя только JavaScript, а не jQuery?
Ответы
Ответ 1
Для этого вы можете использовать querySelector :
document.querySelector('[id^="poll-"]').id;
Селектор означает: получить элемент, в котором атрибут [id]
начинается со строки "poll-"
.
^
соответствует началу
*
соответствует любой позиции
$
соответствует концу
Ответ 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/
Ответ 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/
Ответ 4
Я не совсем уверен, что знаю, о чем вы просите, но вы можете использовать строковые функции для создания фактического идентификатора, который вы ищете.
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);
}
Ответ 5
Вам, вероятно, придется либо дать ему постоянный класс, либо позвонить getElementsByClassName
, либо просто использовать getElementsByTagName
, и просмотреть результаты, проверив имя.
Я предлагаю взглянуть на вашу основную проблему и выяснить способ, которым вы можете заранее знать идентификатор.
Возможно, если вы разместите немного больше о том, почему вы это получили, мы могли бы найти лучшую альтернативу.
Ответ 6
Вы используете свойство id
для получения идентификатора, затем метод substr
для удаления первой части, затем необязательно parseInt
, чтобы превратить его в число:
var id = theElement.id.substr(5);
или
var id = parseInt(theElement.id.substr(5));
Ответ 7
<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">
Идентификатор всегда начинается с "post-", тогда числа являются динамическими.
Пожалуйста, проверьте свои имена, "опрос" и "пост" очень разные.
Как уже было сказано, вы можете использовать querySelector:
var selectors = '[id^="poll-"]';
element = document.querySelector(selectors).id;
но querySelector не найдет "опрос", если вы продолжаете запрашивать "post": '[id^="post-"]'