时间戳

首页 > 解决方案 > 如何使用Javascript将列表项移动到无序列表中的指定索引（位置）

javascript - 如何使用Javascript将列表项移动到无序列表中的指定索引（位置）

问题描述

假设我有一个以下无序列表，如何将“三”移动到列表中的任何索引（位置）？方法应该是动态的。替换元素的文本内容不是一种选择。因为每个列表项也将包含其他元素。

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  .
  .
  .
  <li>Hundred</li>  /* Nth List Element */
</ul>

已经回答过类似问题的尝试解决方案。但是没有得到想要的结果。

我已经试过了

  1. 通过jQuery获取数组中的列表
  2. 使用 array.each 遍历数组
  3. 然后使用 prepend 将特定的 li 移动到列表的顶部

但是通过这种方法，我只能将 li 元素移动到列表的顶部。不在任何想要的位置。

标签： javascripthtmljquerycsshtml-lists

解决方案

为此，我将使用带有基于索引的方法的构造函数：

function LiMover(liParent){
  this.kids = liParent.children;
  this.move = (index, beforeIndex = null)=>{
    const k = this.kids, e = k[index];
    if(beforeIndex === null){
      liParent.appendChild(e)
    }
    else{
      liParent.insertBefore(e, k[beforeIndex]);
    }
    return this;
  }
}
const liMover = new LiMover(document.querySelector('ul'));
liMover.move(0); // move 0 index (one) after last index
liMover.move(5, 0); // move 5 index (one) back to 0 index
liMover.move(1, 4); // move 1 index (two) to 4 index
liMover.move(3, 5).move(2, 0); // showing return this chain
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>  
</ul>

推荐阅读