Вход

Просмотр полной версии : Как найти по слассу (либо id) и вывести все найденные элементы массивов

rudoy24
12.01.2015, 21:50
Имеем код:

...
<div id="title" class="class-title">TITLE-1</div>
<div id="text" class="class-text">text-1 text-1 text-1 text-1 text-1</div>
...
<div id="title" class="class-title">TITLE-2</div>
<div id="text" class="class-text">text-2 text-2 text-2 text-2 text-2</div>
...
<div id="title" class="class-title">TITLE-3</div>
<div id="text" class="class-text">text-3 text-3 text-3 text-3 text-3</div>
...


Необходимо найти по class или id и вывести все найденные элементы массивов таким образом, что бы в итоге получить следующий результат:

...
<p>TITLE-1</p>
<p>text-1 text-1 text-1 text-1 text-1</p>
<p>TITLE-2</p>
<p>text-2 text-2 text-2 text-2 text-2</p>
<p>TITLE-3</p>
<p>text-3 text-3 text-3 text-3 text-3</p>
...
caetus
13.01.2015, 03:00
не понял что тебе нужно , но попробуй
element.querySelectorAll('.class-title')
dimy44
13.01.2015, 03:45
your_text.replace(/.+?class="class-(?:title|text)">([\s\S]+?)<\/div>/g, '<p>$1</p>');
ruslan_mart
13.01.2015, 07:58
rudoy24, ID должен быть уникален.

document.querySelectorAll('.class-title, .class-text')
rudoy24
13.01.2015, 10:19
К примеру такой код:
<script type="text/javascript">
var ele = document.getElementById("image");
if(typeof ele !== 'undefined' && ele !== null) {
document.getElementById('imagesrc').value = "<p>"+document.getElementById('image').src+"</p>";
}
</script>

Передаст элементу с id="imagesrc" значение:
<p>http://img.png</p>

-------------------------------
По заданию мы получили масив(ы) элементов:
var x = document.querySelectorAll('.class-title, .class-text');

Каким образом передать этот масив(ы) значений используя следующую конструкцию, чтобы получить необходимый результат:
document.getElementById('massive').value = ...
ruslan_mart
13.01.2015, 11:20
var elems = document.querySelectorAll('.class-title, .class-text'),
massive = document.getElementById('massive');

[].forEach.call(elems, function(self) {
massive.value += '<p>' + self.innerHTML + '</p>\n';
});
rudoy24
13.01.2015, 12:07
Спасибо "Ruslan_xDD" именно то что нужно. :) (+)

Но есть еще один вопрос:
Какой тогда будет код если необходимо передать текст + src картинки:

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


Чтобы получить такой результат:

...
<p>TITLE-1</p>
<p>http://catalog-img/image-1.jpg</p>
<p>TITLE-2</p>
<p>http://catalog-img/image-2.jpg</p>
<p>TITLE-3</p>
<p>http://catalog-img/image-3.jpg</p>
...
ruslan_mart
13.01.2015, 12:16
var elems = document.querySelectorAll('.class-title, .class-image'),
massive = document.getElementById('massive');

[].forEach.call(elems, function(self) {
massive.value += '<p>' + self[self.tagName == 'IMG' ? 'src' : 'innerHTML'] + '</p>\n';
});
rudoy24
13.01.2015, 13:01
Ruslan_xDD - спасибо, НО данный код:
massive.value += '<p>' + self[self.tagName == 'IMG' ? 'src' : 'innerHTML'] + '</p>\n';
создает дубли:
...
<p>TITLE-1</p>
<p>http://catalog-img/image-1.jpg</p>
<p>TITLE-2</p>
<p>http://catalog-img/image-2.jpg</p>
<p>TITLE-3</p>
<p>http://catalog-img/image-3.jpg</p>
<p>TITLE-1</p>
<p>http://catalog-img/image-1.jpg</p>
<p>TITLE-2</p>
<p>http://catalog-img/image-2.jpg</p>
<p>TITLE-3</p>
<p>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>
...
rudoy24
13.01.2015, 21:37
Не знаю насколько корректно, но сделал так:

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';
}
});


Если можно как-то по другому просьба написать как!
rudoy24
13.01.2015, 21:54
Так как изменить код:
massive.value += '<p>' + self[self.tagName == 'IMG' ? 'src' : 'innerHTML'] + '</p>\n';

что бы избавится от дублей?

С этим кодом вот что пулучаем:
...
<p>TITLE-1</p>
<p>http://catalog-img/image-1.jpg</p>
<p>TITLE-2</p>
<p>http://catalog-img/image-2.jpg</p>
<p>TITLE-3</p>
<p>http://catalog-img/image-3.jpg</p>
<p>TITLE-1</p>
<p>http://catalog-img/image-1.jpg</p>
<p>TITLE-2</p>
<p>http://catalog-img/image-2.jpg</p>
<p>TITLE-3</p>
<p>http://catalog-img/image-3.jpg</p>
...