使用js对数组内容按照所需的顺序进行排序

最新推荐文章于 2024-06-15 11:46:27 发布

小奋斗♛

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量208

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_72684019/article/details/138190543

版权

未处理时的效果：

处理后：

html代码：

<section class="section-index-catalog">
      <h3>Product Catalog</h3>
      <ysun-scroll class="section-index-catalog-scroll">
        <div class="ysun-scroll-container">
          <div class="ysun-scroll-layout">
            <div class="ysun-scroll-wrapper">
              <div class="section-index-catalog-view">
                <p>Product1111</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product2222</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product3333</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product4444</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product5555</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product6666</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product7777</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product8888</p>
              </div>
              <div class="section-index-catalog-view">
                <p>Product9999</p>
              </div>
            </div>
          </div>
        </div>
      </ysun-scroll>
    </section>

js代码：

// 获取包含所有子元素的容器
      const catalogWrapper = document.querySelector(".ysun-scroll-wrapper");

      // 获取所有子元素
      const catalogViews = Array.from(
        catalogWrapper.querySelectorAll(".section-index-catalog-view")
      );

      // 定义要移动的元素的索引
      const indicesToMove = [
        catalogViews.length - 1,
        catalogViews.length - 2,
        catalogViews.length - 3,
        4,
      ]; // 最后三个元素和第五个元素的索引

      // 按照索引的逆序移动元素
      indicesToMove.reverse().forEach((index) => {
        // 获取要移动的元素
        const viewToMove = catalogViews[index];
        // 将元素移动到容器的前面
        catalogWrapper.insertBefore(viewToMove, catalogWrapper.firstChild);
      });