Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2016, 21:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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

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

Сообщение от рони Посмотреть сообщение
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
        })
    })
});
Все замечательно работает. Спасибо большое!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отправить div внутри form ruslite AJAX и COMET 38 05.03.2014 03:48
Div внутри div valyan (X)HTML/CSS 3 03.09.2013 22:43
Как сделать обход элементов внутри DIV reno4 jQuery 4 24.07.2013 13:30
Событие onclick на div, кроме элементов внутри него klev2004 Общие вопросы Javascript 3 04.10.2012 20:33
fade маленького div внутри большого div kenwo0d jQuery 17 19.05.2012 16:27