Работа внутри отдельного 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,
$(function() { var a = $(".post_image_stream"); a.html(function(b, e) { var c = $(".image_name", this).text().split(","), d = $(".page_url", this).text(); return c.map(function(a) { var b = new Image; b.src = d + a; return b }) }) }); |
Цитата:
|
Часовой пояс GMT +3, время: 23:12. |