Выберите отделение, использующее подстановочный идентификатор
Как выбрать использование отделения, это - идентификатор, но с widcard?
Если идентификатор DIV statusMessage_1098, Я хотел бы выбрать его в некотором роде как document.getElementById('statusMessage_*').
Это вызвано тем, что, пока страница не сгенерирована, я не знаю суффикс идентификатора, и только один такой идентификатор будет присутствовать на странице. Действительно ли это возможно?
Спасибо за любую справку.
6 ответов
Используя jQuery, вы можете сделать это
$("div[id^='statusMessage_']")
Edit - с селектором имени класса
Если вы можете использовать имя класса, вы можете использовать что-то вроде этого
$$('div.myDivClass');
получает все элементы div с классом myDivClass
В jquery самый простой способ - назначить класс для каждого div, скажем, 'statusMessage' что-то вроде:
<div id="statusMessage_<%=someid%>" class="statusMessage">...</div>
Чтобы получить их все:
$('.statusMessage') // or $('div.statusMessage') //or $('div[id^=statusMessage_]')
Без jquery:
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].id.indexOf('statusMessage_')==0){
//do stuff here for every divs[i]
}
}
Я не уверен, как вы его заполняете, но если это из исходного кода, вы можете попробовать что-нибудь вроде:
document.getElementById('statusMessage_<%= generatedID %>')
где сгенерированныйID - это идентификатор, сгенерированный из исходного кода.
Обычный способ сделать это в css - присвоить элементам класс statusMessage в дополнение к их уникальным идентификаторам. Затем вы можете создать правило CSS с селектором, которое будет влиять на все элементы с этим классом. Например,
.statusMessage {color: red;}
Помните, что элементы могут иметь более одного класса. Например,
<p id="id123" class="class1 class2">
Wildcard Solution на основе атрибута element id
Да, это возможно. Это позволяет ответить на ваш вопрос напрямую, не полагаясь на сторонние JavaScript или API или атрибуты, отличные от идентификатора элемента. Также нет необходимости использовать class=
Custom Method Call Example
// Uses JavaScript regex features to search on id= attribute
var arrMatches = document.getElementsByRegex('^statusMessage_.*');
В результате получается массив, содержащий все элементы, идентификатор которых начинается с "statusMessage_" (даже вложенные).
Implementation Example - reusable and generic
Вот реализация функции getElementsByRegex, которая ищет DOM для данного регекса, начиная с документа и заканчивая документом . Для удобства и в соответствии с ожидаемым поведением она прикреплена к объекту документа.
<head>
<script>
// Called as: document.getElementsByRegex("pattern").
// Returns an array of all elements matching a given regular expression on id.
// 'pattern' argument is a regular expression string.
//
document['getElementsByRegex'] = function(pattern){
var arrElements = []; // to accumulate matching elements
var re = new RegExp(pattern); // the regex to match with
function findRecursively(aNode) { // recursive function to traverse DOM
if (!aNode)
return;
if (aNode.id !== undefined && aNode.id.search(re) != -1)
arrElements.push(aNode); // FOUND ONE!
for (var idx in aNode.childNodes) // search children...
findRecursively(aNode.childNodes[idx]);
};
findRecursively(document); // initiate recursive matching
return arrElements; // return matching elements
};
</script>
</head>
Скорее всего, существуют более эффективные реализации, но эта дает начало. Тело функции может быть заменено другими алгоритмами по вкусу.
Проверьте Code
Наконец, протестируйте его, используя HTML-обманку с вложенными элементами типа this
<body>
<div id="statusMessage_1">1</div>
<div id="statusMessage_2">2
<div id="content">other stuff</div>
<div id="statusMessage_3">3</div>
</div>
<script>
// a quick test to see if you get the expected result.
var arrMatches = document.getElementsByRegex('^statusMessage_.*');
alert('found ' + arrMatches.length + ' matches - expected 3.')
</script>
Этот HTML-блок содержит три элемента, начинающихся с id="statusMessage_; Поэтому тест предупреждения скажет
"найдено 3 совпадения - ожидается 3"
Addendum Info for Variations
Если вы хотите ограничить поиск только div элементами или каким-либо другим специфическим элементом, то вы захотите вставить следующий getElementByTagName код в алгоритм, чтобы ограничить набор элементов, по которым ведется поиск.
var arrDivs = document.getElementsByTagName("div"); // pull all divs from the doc
Вы можете захотеть изменить общий алгоритм, передав имя тега во втором аргументе для фильтрации перед началом поиска вроде этого
var arrMatches = document.getElementsByRegex('^statusMessage_.*', 'div');
Если Вы не хотите использовать jQuery, то есть другой более простой способ:
Присвоить класс - для примера назовите его "message", и используйте следующее:
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Вот как Вы его называете:
var messages = getElementsByClass("message");
for(var index=0; index < messages.length; index++) {
// prompt the content of the div
//alert(message[index].innerText);
}