Javascript 重新排序从PHP数组呈现的HTML

我相信有一个简单快捷的答案，只是我现在没有想到。我为一个滑块构建了自定义html/css/js，该滑块从如下数组中提取其内容：

$slides = [
    [
        'img'       => 'image1.jpg',
        'text'  => 'Slide One text',
        'svg'       => 'cat1'
    ],
    [
        'img'       => 'image2.jpg',
        'text'  => 'Slide Two Text',
        'svg'       => 'cat2'
    ],
    // First slide
    [
        'img'       => 'image3.jpg',
        'text'  => 'Slide Three Text',
        'svg'       => 'cat3'
    ],
    [
        'img'       => 'image4.jpg',
        'text'  => 'Slide Four Text',
        'svg'       => 'cat4'
    ],
    [
        'img'       => 'image5.jpg',
        'text'  => 'Slide Five Text',
        'svg'       => 'cat5'
    ],
];

        <div class="home-slider-wrap">
                <?php foreach ($slides as $index=>$slide): ?>
                    <div class="home-slider-slide slide<?php echo $index; ?> <?php if($index == 2){ echo 'active'; } ?>" data-slide="<?php echo $index; ?>">
                        <img src="/images/homepage/<?php echo $slide[img]; ?>" alt="<?php echo $slide['text']; ?>">
                    </div>
                <?php endforeach; ?>
            </div>

我以css/js依赖于第三张幻灯片处于活动状态的方式构建了滑块。然后，幻灯片包装器为mobile重置，数组中的第一张幻灯片是呈现html中的第一张幻灯片。我不想更改/更新css结构，因为它控制着大约5个媒体查询断点，并且非常特定于一个独特的设计。我希望有一种简单的方法，我可以在html中重新排序数组，这样在桌面上第三张幻灯片是第一张，在移动设备上第一张幻灯片是第一张。有没有一个简单的方法可以做到这一点，我只是没有想到？我的html如下所示：

$slides = [
    [
        'img'       => 'image1.jpg',
        'text'  => 'Slide One text',
        'svg'       => 'cat1'
    ],
    [
        'img'       => 'image2.jpg',
        'text'  => 'Slide Two Text',
        'svg'       => 'cat2'
    ],
    // First slide
    [
        'img'       => 'image3.jpg',
        'text'  => 'Slide Three Text',
        'svg'       => 'cat3'
    ],
    [
        'img'       => 'image4.jpg',
        'text'  => 'Slide Four Text',
        'svg'       => 'cat4'
    ],
    [
        'img'       => 'image5.jpg',
        'text'  => 'Slide Five Text',
        'svg'       => 'cat5'
    ],
];

        <div class="home-slider-wrap">
                <?php foreach ($slides as $index=>$slide): ?>
                    <div class="home-slider-slide slide<?php echo $index; ?> <?php if($index == 2){ echo 'active'; } ?>" data-slide="<?php echo $index; ?>">
                        <img src="/images/homepage/<?php echo $slide[img]; ?>" alt="<?php echo $slide['text']; ?>">
                    </div>
                <?php endforeach; ?>
            </div>

---

我想保留数组，这样我就不必更新js或css，而是想对数组重新排序。希望这是有意义的。

使用jQuery，您可以执行以下操作

$(function(){
    if($(window).width() > deskTopBreakpointValue ){         
      var $first = $('.home-slider-slide.active');
      $('.home-slide-wrap').prepend($first);
    }

    // now initialize your slider code

})

---

那么您面临什么问题呢？如果您正在重新加载页面，请让PHP在将页面重新发送到客户端之前对元素重新排序。如果必须在客户端完成，则必须添加JS对数组进行排序，然后重新渲染所有更改。这可能也可以通过在媒体查询中使用额外的css来实现。您可能希望在预加css之前将其删除，以避免duplication@MrBizle这是不可能发生的…当你移动一个元素时，它必须从它的当前位置移除，以便放入一个新的元素中，并且全部由prepend处理