Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Работа внутри отдельного DIV (https://javascript.ru/forum/dom-window/61287-rabota-vnutri-otdelnogo-div.html)

Constantin.UK 11.02.2016 21:00

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

рони 11.02.2016 21:48

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
        })
    })
});

Constantin.UK 11.02.2016 21:59

Цитата:

Сообщение от рони (Сообщение 407352)
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, время: 04:38.