javascript - 使用 jQuery 在 div 之间注入(inject)自定义代码

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>

我不能“只将它们作为单张”，然后在桌面上设置 slidesToShow: 4 ，因为我需要将它们放在网格中，它们显示在彼此之上，例如所以:

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

所以他们需要桌面上的容器。但我希望用户可以在移动设备上一次滚动浏览一个实体。

有没有办法可以注入(inject)

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

在两者之间...呃...我的 slider 内的一些 div？这是一个可怕的问题。我知道。 :-/

Answer 1

您可以进行一些 DOM 操作:

1. 将内部 div 移动到父级 (.slider)
2. 为每个添加类 .slick__single-slide。
3. 用 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>