Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.02.2013, 06:06
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 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
Ответить с цитированием
  #2 (permalink)  
Старый 01.02.2013, 07:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 01.02.2013, 08:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от lamer
У меня находит только содержимое первого класса:
а зачем break; в 36 строке???
Ответить с цитированием
  #4 (permalink)  
Старый 01.02.2013, 08:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 01.02.2013, 08:14
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

рони, гениально! Совершенно иной подход, я даже догадаться не мог. Научишь?
Ответить с цитированием
  #6 (permalink)  
Старый 01.02.2013, 08:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

danik.js,
Цитата:
Ученого учить — только портить
Ответить с цитированием
  #7 (permalink)  
Старый 01.02.2013, 16:14
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от рони
list[i].className.search('\\b' + classArray[j] + '\\b') != -1
ещё бывает такое :
(" " + list[i].className + " ").indexOf( " " + classArray[j] + " " );

интересно, что лучше ?)
Ответить с цитированием
  #8 (permalink)  
Старый 01.02.2013, 20:08
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 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>
Ответить с цитированием
  #9 (permalink)  
Старый 01.02.2013, 20:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 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 );
 
}
Ответить с цитированием
  #10 (permalink)  
Старый 01.02.2013, 23:18
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

danik.js, спасибо очень помогли.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как получить содержимое элемента? Esigns Events/DOM/Window 2 27.09.2012 15:11
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Получить список всех css-свойств и их возможных значений, поддерживаемые браузером Denisko-Redisko Общие вопросы Javascript 7 03.01.2012 03:33
Как получить содержимое ячейки таблицы Enxiro jQuery 5 29.05.2011 16:36
Как получить список всех установленных плагинов VitAngel Internet Explorer 0 15.07.2009 09:13