Выводить содержимое блока в другом месте страницы

Тема в разделе "JavaScript", создана пользователем White_S, 10 июл 2014.

Модераторы: ZiX
  1. White_S

    White_S

    Регистр.:
    27 май 2009
    Сообщения:
    474
    Симпатии:
    95
    Подскажите есть такая необходимость вывести содержимое блока в другом месте страницы. Ну т.е. не в том порядке как это есть в коде. Для примера, описание категории стандартно над списком товара, хочу чтобы в коде было так же, а визуально показывалось ниже списка товаров. Должно быть решение, но я не нашел. Спасибо.
     
  2. Otto

    Otto

    Регистр.:
    12 май 2008
    Сообщения:
    481
    Симпатии:
    158
    Приводи пример страницы, скриншоты, код... Больше инфы. надо... Так тебе никто не поможет...
    Причём тут JavaScript, у тебя что через него выводятся список категории? Проще создать 2 блока, и через массив как хочешь так и выводи...
     
  3. warg

    warg Постоялец

    Регистр.:
    26 июн 2007
    Сообщения:
    122
    Симпатии:
    122
    как вариант скрыть блок где не нужно показывать с помощью display:none,
    и заполнить нужный контейнер чем то наподобие такого (jQuery) :
    $("div.target-container").html($("div.source-container").html());

    другой способ, более "красивый" - переместить DOM элемент в дереве:
    $("div.source-container").detach().appendTo('div.target-container')

    div использовался в качестве классического примера, элемент естественно может быть любым другим.
     
    White_S нравится это.
  4. mff4

    mff4 Постоялец

    Регистр.:
    2 апр 2008
    Сообщения:
    113
    Симпатии:
    15
    Используйте Firebug для Firefox. Найдите слой с нужным вам содержимым, узнайте его css класс или id, далее смотрите что там в css для него прописано. Очень кстати удобно.
     
  5. freet

    freet Создатель

    Регистр.:
    21 янв 2014
    Сообщения:
    17
    Симпатии:
    9
    Недавно сам решал подобную задачу.. Задача была следующая - разместить div с иконками социальных сетей возле каждого h1.
    Решение было найдено следующее:
    HTML:
    <!-- Социальные кнопки -->
    <div class='yashare-auto-init' data-yashareL10n='ru' data-yashareType='none' data-yashareQuickServices='vkontakte,facebook,odnoklassniki,moimir,moikrug'></div>
    
    <script type="text/javascript">
    $(document).ready(function(){
      $('.yashare-auto-init').insertAfter('h1').css("display", "block");
    });
    </script>
    <!-- /Социальные кнопки -->
    Соответствующие стили:
    Код:
    .yashare-auto-init {
    float: right;
    margin-top: -50px;
    position: relative;
    z-index: 1000;
    display:none;
    }
    h1 {float: left; width: 100%;}
    Div с кнопками размещен под футером и скрыт.. Но во время загрузки документа блок размещается возле h1 и делается видимым.
    Этот метод решает озвученную задачу - вывести содержимое блока в другом месте страницы.

    Если рассмотреть пример - описание категории стандартно над списком товара, хочу чтобы в коде было так же, а визуально показывалось ниже списка товаров.
    Тем-же методом можно поставить блок после списка товаров:
    Код:
    $('.div_opisanie_kategorii').insertAfter('.div_spisok_tovarov');
     
    Последнее редактирование: 30 июл 2014
    White_S нравится это.
  6. White_S

    White_S

    Регистр.:
    27 май 2009
    Сообщения:
    474
    Симпатии:
    95
    Извините что долго не отвечал, вот задача [​IMG]
    вот сайт

    На сколько я понимаю source-container - содержит искомые данные (картинку),а target-container - это пустой контейнер в который перемещаем. Можно пример простенький кода?
    Скажите, а можно использовать не тег заголовка, как в данном случае, а класс элемента?
     
  7. freet

    freet Создатель

    Регистр.:
    21 янв 2014
    Сообщения:
    17
    Симпатии:
    9
    Да, конечно.. Справедливы следующие записи: 'div' - тег, '.content' - класс, '#content' - id

    Натолкнулся на неплохие статьи на эту тему:
    Обход DOM-элементов
    Создание новых DOM-элементов
    Вставка новых элементов в DOM
    Доступ к CSS и атрибутам и их изменение
     
    Последнее редактирование модератором: 13 авг 2014
  8. SteelRat

    SteelRat Постоялец

    Регистр.:
    12 апр 2007
    Сообщения:
    54
    Симпатии:
    7
    если речь о jQuery, то в примере
    $('.div_opisanie_kategorii') - div_opisanie_kategorii - это как раз класс
     
  9. White_S

    White_S

    Регистр.:
    27 май 2009
    Сообщения:
    474
    Симпатии:
    95
  10. freet

    freet Создатель

    Регистр.:
    21 янв 2014
    Сообщения:
    17
    Симпатии:
    9
    Вставка объекта внутрь объекта:
    $('.tags').appendTo('.aft12').css("display", "block");
    $('.tags').appendTo('.aft12').css({"display" : "block", "top" : "0"});

    Вставка объекта после объекта:
    $('.tags').insertAfter('.aft12').css("display", "block");
    $('.tags').insertAfter('.aft12').css({"display" : "block", "top" : "0"});

    Перемещение объекта внутрь объекта:
    $('.tags').detach().appendTo('.aft12').css("display", "block");
    $('.tags').detach().appendTo('.aft12').css({"display" : "block", "top" : "0"});

    Перемещение объекта после объекта:
    $('.tags').detach().insertAfter('.aft12').css("display", "block");
    $('.tags').detach().insertAfter('.aft12').css({"display" : "block", "top" : "0"});

    Попробуй разместить скрипт в конце страницы.
     
    Последнее редактирование: 14 окт 2014
    White_S нравится это.