Блог

Главная - Вопросы по программированию - Поменять местами html-элементы с помощью Jquery?

Поменять местами html-элементы с помощью Jquery?

#jquery #html #swap

#jquery #HTML #поменять местами

Вопрос:

Я хочу переключать html-элементы внутри моего html, когда размер моего экрана становится ниже 880 пикселей, однако это работает не так, как я ожидал…

У меня есть несколько сообщений внутри моего html, сгенерированного из цикла php, для каждого сообщения это выглядит так:

 <div class="post">
  <h1>Lorem ipsum</h1>
  <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>
</div>

Что я хочу сделать, так это когда экран моего браузера достигнет 880 пикселей и ниже, элементы h1 и p поменяются местами друг с другом с помощью jquery insertBefore.

Ниже мой код:

http://codepen.io/vincentccw/pen/GHnFD?editors=101

Ответ №1:

 $(document).ready(function () {

    $(window).resize(divSwap);

    function divSwap() {
        if ($(document).width() <= 880) {
            $('.post').each(function () {
                $el = $(this);
                $el.find('p').insertBefore( $el.find('h1') );
            });
        }
    }

    divSwap();

});

Комментарии:

1. Функция divSwap устанавливается в качестве обработчика событий для изменения размера события в окне.

2. Да, я заметил это после того, как я сделал комментарий о загрузке страницы, поэтому я удалил комментарий. Отличный ответ, хотя — наверняка лучшее решение, чем мое.

Ответ №2:

Вы могли бы добавить еще один тег h1 под тегом p и скрыть первый на мобильном устройстве, а второй показать на мобильном устройстве. Я ненавижу дублировать информацию, но это легко исправить:

 <div class="post">
<h1 class="MobileHide">Lorem ipsum</h1>
<p>

Lorem Ipsum — это просто фиктивный текст для индустрии печати и набора текста. Lorem Ipsum был стандартным в отрасли фиктивным текстом с 1500-х годов, когда неизвестный принтер взял таблицу типов и скремблировал ее, чтобы создать книгу образцов типов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. Он был популяризирован в 1960-х годах с выпуском таблиц Letraset, содержащих отрывки Lorem Ipsum, и совсем недавно с настольным издательским программным обеспечением, таким как Aldus PageMaker, включая версии Lorem Ipsum.

 </p>
<h1 class="MobileOnly">Lorem ipsum</h1>
</div>

Тогда в вашем CSS класс «MobileHide» имеет значение display:inline или block выше 880 пикселей и display:none ниже. И класс «MobileOnly» — это display:none выше 880 пикселей, а display: block или inline под ним.

Надеюсь, это поможет!