使用 jQuery 在 div 之间注入自定义代码

Question

我有一个 Slick-slider，在桌面上看起来像这样：

<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>

我不能 'just have them as singles' 然后在桌面上设置 slidesToShow: 4，因为我需要将它们放在一个网格中，它们在一个网格上显示，如下所示：

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

所以他们需要桌面上的容器。但我想做到这一点，以便用户可以在移动设备上一次滚动一个实体。

有什么方法可以注射

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

介于两者之间...嗯...我的滑块内的一些 div？这是一个可怕的问题。我知道。 :-/

Answer 1

你可以做一些DOM操作：

将内部 div 移至父级 (.slider)
为每个添加 class .slick__single-slide。
用div包裹他们的内容（数字）。

我在 pre 标签中显示了输出 html，这样可以很容易地看到结果。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

The updated html:
<pre></pre>

使用 jQuery 在 div 之间注入自定义代码

Injecting custom code between divs with jQuery

javascript

jquery

slick.js