01.02.2013, 06:06
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
Получить содержимое всех className!
Здравствуйте, подскажите пожалуйста как получить содержимое всех className и разделить их символом "-" ?
У меня находит только содержимое первого класса:
<html>
<head>
</head>
<body>
<div class="info">111</div>
<div class="info">222</div>
<div class="info">333</div>
<br>
<input type="button" value="search" onclick="search();">
<script>
function search() {
getElementsByClass = function(classList, node) {
var node = node || document,
list = node.getElementsByTagName('*'),
length = list.length,
classArray = classList.split(/\s+/),
classes = classArray.length,
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break
}
}
}
return result
}
var elements = getElementsByClass('info');
for (i=0; i < elements.length; i++) {
if (elements[i].className == 'info') {
alert(elements[i].textContent || elements[i].innerText || ""); break;
}
}
}
</script>
</body>
</html>
В результате чтоб вышло примерно так:
111 - 222 - 333
|
|
01.02.2013, 07:55
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
1) Используйте document.getElementsByClassName метод. Для IE7-8 добавлен костыль.
2) break останавливает цикл. Поэтому ваш код обрабатывает только первый элемент
3) Раз мы уже выбрали элементы с классом info, то зачем еще одна проверка?
4) Перед i потеряли ключевое слово var, в итоге объявили ее как глобальную.
С учетом сказанного выше:
<html>
<head>
</head>
<body>
<div class="info">111</div>
<div class="info">222</div>
<div class="info">333</div>
<br>
<input type="button" value="search" onclick="search();">
<script>
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
function search() {
var elements = document.getElementsByClassName('info');
var contents = [];
for (var i=0; i < elements.length; i++) {
contents[i] = elements[i].innerText || elements[i].textContent || '';
}
var result = contents.join(' - ');
alert( result );
}
</script>
</body>
</html>
Последний раз редактировалось danik.js, 01.02.2013 в 08:02.
|
|
01.02.2013, 08:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Сообщение от lamer
|
У меня находит только содержимое первого класса:
|
а зачем break; в 36 строке???
|
|
01.02.2013, 08:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
lamer,
<html>
<head>
</head>
<body>
<div class="info">111</div>
<div class="info">222</div>
<div class="info">333</div>
<br>
<input type="button" value="search" onclick="search();">
<script>
function search() {
getElementsByClass = function(classList, node) {
var node = node || document,
list = node.getElementsByTagName('*'),
length = list.length,
classArray = classList.split(/\s+/),
classes = classArray.length,
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break
}
}
}
return result
}
var elements = getElementsByClass('info');
for (i=0; i < elements.length; i++) {
elements[i]=elements[i].textContent || elements[i].innerText || "";
}
alert(elements.join(' - '))
}
</script>
</body>
</html>
|
|
01.02.2013, 08:14
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
рони, гениально! Совершенно иной подход, я даже догадаться не мог. Научишь?
|
|
01.02.2013, 08:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
danik.js,
Цитата:
|
Ученого учить — только портить
|
|
|
01.02.2013, 16:14
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от рони
|
list[i].className.search('\\b' + classArray[j] + '\\b') != -1
|
ещё бывает такое :
(" " + list[i].className + " ").indexOf( " " + classArray[j] + " " );
интересно, что лучше ?)
|
|
01.02.2013, 20:08
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
danik.js, спасибо я понял свою ошибку.
Встал вопрос, немного по другому, как записать чтоб в результате была выдача такая:
1 - 1
2 - 2
3 - 3
<html>
<head>
</head>
<body>
<div class="infoOne">1</div>
<div class="infoTwo">1</div>
<div class="infoOne">2</div>
<div class="infoTwo">2</div>
<div class="infoOne">3</div>
<div class="infoTwo">3</div>
<br>
<input type="button" value="search" onclick="search();">
<script>
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
function search() {
var infoOne = document.getElementsByClassName('infoOne');
var infoTwo = document.getElementsByClassName('infoTwo');
var contentsOne = [];
var contentsTwo = [];
for (var i=0; i < infoOne.length; i++) {
contentsOne[i] = infoOne[i].innerText || infoOne[i].textContent || '';
}
for (var i=0; i < infoTwo.length; i++) {
contentsTwo[i] = infoTwo[i].innerText || infoTwo[i].textContent || '';
}
var result = contentsOne.join(' - ') + '\n' + contentsTwo.join(' - ');
alert( result );
}
</script>
</body>
</html>
|
|
01.02.2013, 20:20
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
function search() {
var infoOne = document.getElementsByClassName('infoOne');
var infoTwo = document.getElementsByClassName('infoTwo');
var contents = [];
for (var i=0; i < infoOne.length; i++) {
contents[i] = [infoOne[i].innerText || infoOne[i].textContent || '', infoTwo[i].innerText || infoTwo[i].textContent || ''].join(' - ');
}
var result = contents.join('\n'); // для html - join('<br/>')
alert( result );
}
|
|
01.02.2013, 23:18
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
danik.js, спасибо очень помогли.
|
|
|
|