Показать сообщение отдельно
  #1 (permalink)  
Старый 11.02.2016, 21:00
Интересующийся
Отправить личное сообщение для Constantin.UK Посмотреть профиль Найти все сообщения от Constantin.UK
 
Регистрация: 03.02.2011
Сообщений: 17

Работа внутри отдельного DIV
Добрый вечер, Уважаемые!
Вот никак не могу решить проблемку.
Значит есть у нас следующая структура 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, для личного использования. Поэтому главное чтобы работало, но если еще будет и "красиво", то только плюс!

Последний раз редактировалось Constantin.UK, 11.02.2016 в 21:07.
Ответить с цитированием