Внедрение пользовательского кода между div с помощью jQuery - PullRequest
Новая
       30

Внедрение пользовательского кода между div с помощью jQuery

0 голосов
/ 18 апреля 2019

У меня есть Slick-слайдер, который выглядит на рабочем столе следующим образом: 

<div class="regular slider">
  <div class="slick__single-slide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div><!-- /.slick__single-slide -->
</div>

На мобильном устройстве я пытаюсь сделать структуру такой: 

<div class="regular slider">
  <div class="slick__single-slide">
    <div>1</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>2</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>3</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>4</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>5</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>6</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>7</div>
  </div><!-- /.slick__single-slide -->
  <div class="slick__single-slide">
    <div>8</div>
  </div><!-- /.slick__single-slide -->
</div>

Я могу«просто« сделайте так, чтобы они были одиночными », а затем установите slidesToShow: 4 на рабочем столе, поскольку они нужны мне в виде сетки, где они отображаются друг над другом, например: 

      -------
       1 | 2
<<    -------    >>
       3 | 4
      -------

им нужен контейнер на рабочем столе.Но я хотел бы сделать так, чтобы пользователь мог прокручивать сущности по одному на мобильных устройствах.

Есть ли способ, где я могу вставить 

</div><!-- /.slick__single-slide -->
<div class="slick__single-slide">

между ними.... эм ... какие-то элементы внутри моего слайдера?Это ужасная проблема.Я знаю.: - /

1 Ответ

1 голос
/ 18 апреля 2019

Вы можете сделать некоторые манипуляции с DOM:

  1. Переместить внутренние div s к родителю (.slider)
  2. Добавить класс .slick__single-slide к каждому.
  3. Оберните их внутреннее содержимое (число) с помощью div.

Я показываю выходной html в теге pre, чтобы было легко увидеть результат. 

$('.slick__single-slide div').unwrap().addClass('slick__single-slide').each(function() {
  $(this).contents().wrap('<div />');
});
$('pre').text($('.slider')[0].outerHTML);


  
    1
    2
    3
    4
  <!-- /.slick__single-slide -->
  
    5
    6
    7
    8
  <!-- /.slick__single-slide -->


The updated html:
...