Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как найти по слассу (либо id) и вывести все найденные элементы массивов (https://javascript.ru/forum/misc/52914-kak-najjti-po-slassu-libo-id-i-vyvesti-vse-najjdennye-ehlementy-massivov.html)

rudoy24 12.01.2015 21:50

Как найти по слассу (либо id) и вывести все найденные элементы массивов
 
Имеем код:
...
<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';
	}
});


Если можно как-то по другому просьба написать как!


Часовой пояс GMT +3, время: 21:52.