Добрый вечер, Уважаемые!
Вот никак не могу решить проблемку.
Значит есть у нас следующая структура HTML:
<div class="post_image_stream">
<div class="page_url">http://website.com/page/</div>
<div class="image_name">001.jpg,002.jpg,003.jpg</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="post_image_stream">
<div class="page_url">http://website.com/page/</div>
<div class="image_name">004.jpg,005.jpg,006.jpg</div>
</div>
Повлиять на вывод информации никак нельзя, но нужно преобразовать вывод в такую форму:
<div class="post_image_stream">
<img src="http://website.com/page/001.jpg">
<img src="http://website.com/page/002.jpg">
<img src="http://website.com/page/003.jpg">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="post_image_stream">
<img src="http://website.com/page/004.jpg">
<img src="http://website.com/page/005.jpg">
<img src="http://website.com/page/006.jpg">
</div>
Практически получилось все реализовать, но знаний не хватает.
Сделал следующее: получаем в переменные содержание дивов "page_url" и "image_name", далее преобразуем переменную с номерами фотографий в массив, и далее все выводим через $.each.
$( document ).ready(function() {
var img_url = $('.js_post_image_url').text();
var img_names = $('.js_post_image_name').text();
$(".js_post_image_url").remove();
$(".js_post_image_name").remove();
var img_name = img_names.split(',');
$.each(img_name, function (index, value) {
$('.post_image_stream').prepend($('<img>',{src: img_url + value}))
});
});
Проблема в том, что нужно заставить скрипт получать информацию (путь и имя файла) отдельно в каждом диве. Сейчас он считывает информацию со всех дивов с этим классом на странице, и результат суммируется. Т.е. на выходе получается не:
<div class="post_image_stream">
<img src="http://website.com/page/001.jpg">
<img src="http://website.com/page/002.jpg">
<img src="http://website.com/page/003.jpg">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="post_image_stream">
<img src="http://website.com/page/004.jpg">
<img src="http://website.com/page/005.jpg">
<img src="http://website.com/page/006.jpg">
</div>
а
<div class="post_image_stream">
<img src="http://website.com/page/http://website.com/page/001.jpg">
<img src="http://website.com/page/http://website.com/page/002.jpg">
<img src="http://website.com/page/http://website.com/page/003.jpg">
<img src="http://website.com/page/http://website.com/page/004.jpg">
<img src="http://website.com/page/http://website.com/page/005.jpg">
<img src="http://website.com/page/http://website.com/page/006.jpg">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="post_image_stream">
<img src="http://website.com/page/http://website.com/page/001.jpg">
<img src="http://website.com/page/http://website.com/page/002.jpg">
<img src="http://website.com/page/http://website.com/page/003.jpg">
<img src="http://website.com/page/http://website.com/page/004.jpg">
<img src="http://website.com/page/http://website.com/page/005.jpg">
<img src="http://website.com/page/http://website.com/page/006.jpg">
</div>
Пробовал разобраться с $(this), но не вышло. Но думаю что истинна где-то рядом.
Заранее благодарю за помощь!
P.S. Прошу прощения за возможные неточности в формулировках. Старался описать понятно.
P.P.S. Все это необходимо для админки CMS, для личного использования. Поэтому главное чтобы работало, но если еще будет и "красиво", то только плюс!