Работа внутри отдельного 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, время: 13:15. |