Форум

rudoy24 · #1 (**permalink**) 16.01.2015, 11:35

Есть код страницы:

...
<div class="class-title">TITLE-1</div>
<img class="class-image" src="http://catalog-img/image-1.jpg" />
...
<div class="class-title">TITLE-2</div>
<img class="class-image" src="http://catalog-img/image-2.jpg" />
...
<div class="class-title">TITLE-3</div>
<img class="class-image" src="http://catalog-img/image-3.jpg" />
...

При помощи следующего скрипта:

var elems = document.querySelectorAll('.class-title, .class-image'),
    massive = document.getElementById('massive');

[].forEach.call(elems, function(self) {
if (self.tagName == 'IMG') {
	massive.value += '<p><img src=\"' + self[self.tagName == 'IMG' ? 'src' : 'innerHTML'] + '\" /></p>\n';
	} else {
	massive.value += '<p>' + self.innerHTML + '</p>\n';
	}
});

ПОЛУЧЕМ:

...
<p>TITLE-1</p>
<p><img src="http://catalog-img/image-1.jpg" /></p>
<p>TITLE-2</p>
<p><img src="http://catalog-img/image-2.jpg" /></p>
<p>TITLE-3</p>
<p><img src="http://catalog-img/image-3.jpg" /></p>
<p>TITLE-1</p>
<p><img src="http://catalog-img/image-1.jpg" /></p>
<p>TITLE-2</p>
<p><img src="http://catalog-img/image-2.jpg" /></p>
<p>TITLE-3</p>
<p><img src="http://catalog-img/image-3.jpg" /></p>
...

Как избавится от дублей, что бы получить?:

...
<p>TITLE-1</p>
<p><img src="http://catalog-img/image-1.jpg" /></p>
<p>TITLE-2</p>
<p><img src="http://catalog-img/image-2.jpg" /></p>
<p>TITLE-3</p>
<p><img src="http://catalog-img/image-3.jpg" /></p>
...

рони · #2 (**permalink**) 16.01.2015, 11:45

rudoy24,
а просто убрать класс из картинок и переписать тег div на тег p?

рони · #3 (**permalink**) 16.01.2015, 12:00

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
...
<div class="class-title">TITLE-1</div>
<img class="class-image" src="http://catalog-img/image-1.jpg" />
...
<div class="class-title">TITLE-2</div>
<img class="class-image" src="http://catalog-img/image-2.jpg" />
...
<div class="class-title">TITLE-3</div>
<img class="class-image" src="http://catalog-img/image-3.jpg" />
...
<script>
  var elems = document.querySelectorAll('.class-image');
  for (var i=0; i<elems.length; i++)  {elems[i].classList.remove('class-image')}
  elems = document.querySelectorAll('.class-title');
  for (var i=0; i<elems.length; i++)  {
  var newDiv = document.createElement('p');
  newDiv.innerHTML =  elems[i].innerHTML;
  elems[i].parentNode.replaceChild(newDiv, elems[i])}
  alert(document.body.innerHTML)
</script>
</body>

</html>

rudoy24 · #4 (**permalink**) 16.01.2015, 13:30

А передать все занчения?:

document.getElementById('massive')

Подскажите!

danik.js · #5 (**permalink**) 16.01.2015, 13:50

rudoy24, нескромный вопрос - какой в этом замысел?

rudoy24 · #6 (**permalink**) 16.01.2015, 14:03

danik.js - это своего рода (типа) парсер. Скрипт создает массив (из текста и картинок по классу) >> массив с данными передается переменной >> готовый результат отправляется на почту.

То есть обработчик написанный в самом начале работает правильно, но создает дубли, а от них необходимо избавится!

рони · #7 (**permalink**) 16.01.2015, 14:38

rudoy24,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<textarea id="massive" name="" cols="70" rows="10" ></textarea>
...
<div class="class-title">TITLE-1</div>
<img class="class-image" src="http://catalog-img/image-1.jpg" />
...
<div class="class-title">TITLE-2</div>
<img class="class-image" src="http://catalog-img/image-2.jpg" />
...
<div class="class-title">TITLE-3</div>
<img class="class-image" src="http://catalog-img/image-3.jpg" />
...

<script>
 var elems = document.querySelectorAll('.class-title, .class-image'),
    massive = document.getElementById('massive');

[].forEach.call(elems, function(self) {
if (self.tagName == 'IMG') {
	massive.value += '<p><img src=\"' + self.src + '\" /></p>\n';
	} else {
	massive.value += '<p>' + self.innerHTML + '</p>\n';
	}
});

</script>
</body>

</html>

rudoy24 · #8 (**permalink**) 16.01.2015, 18:03

Спасибо рони (+)...
То что нужно!

Форум

Справочник

Discord чат

Курсы javascript