JS实现上一个、下一个、置顶、置底操作

 

废话不多说,直接上代码。

//index1和index2分别是两个数组的索引值,即是两个要交换元素位置的索引值,如1,5就是数组中下标为1和5的两个元素交换位置

export function swapArray(arr, index1, index2) {

    arr[index1] = arr.splice(index2, 1, arr[index1])[0];

    return arr;

}

//置顶

export function zd(arr,index){

    if(index!=0){

        arr.unshift(arr.splice(index,1)[0])

    }else{

        alert('已经处于最上');

    }

}

//置底

export function zdd(arr,index){

    if(index!=arr.length-1){

        var temp=arr[index];//

        arr.splice(index,1);

        arr.push(temp);

        // arr.unshift(arr.splice(index,1)[0])

        // arr.reverse();

    }else{

        alert('已经处于最下');

    }

}

//上移 将当前数组index索引与后面一个元素互换位置,向数组后面移动一位

export function zIndexUp(arr,index,length){

    debugger

    if(index+1 != length){

   

    swapArray(arr, index, index+1);

   

    }else{

   

    alert('已经处于最下,无法下移');

   

    }

   

}

//下移 将当前数组index索引与前面一个元素互换位置,向数组前面移动一位

   

export  function zIndexDown(arr,index,length){

   

    if(index!= 0){

   

    swapArray(arr, index, index-1);

   

    }else{

   

    alert('已经处于最上,无法上移');

   

    }

   

Array.reverse();js 数组反转,倒置

    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实现上移下移置顶置底需要使用 JavaScript操作 DOM 元素。 具体实现可以参考以下代码: ```html <ul id="list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul> <button onclick="moveUp()">上移</button> <button onclick="moveDown()">下移</button> <button onclick="moveTop()">置顶</button> <button onclick="moveBottom()">置底</button> ``` ```javascript // 获取列表元素和当前选中的项 var list = document.getElementById("list"); var selectedItem; // 上移操作 function moveUp() { if (selectedItem) { var prevItem = selectedItem.previousElementSibling; if (prevItem) { list.insertBefore(selectedItem, prevItem); } } } // 下移操作 function moveDown() { if (selectedItem) { var nextItem = selectedItem.nextElementSibling; if (nextItem) { list.insertBefore(nextItem, selectedItem); } } } // 置顶操作 function moveTop() { if (selectedItem) { list.insertBefore(selectedItem, list.firstChild); } } // 置底操作 function moveBottom() { if (selectedItem) { list.appendChild(selectedItem); } } // 监听列表项点击事件,记录当前选中的项 list.addEventListener("click", function(e) { selectedItem = e.target; }); ``` 这段代码实现一个简单的列表操作,通过点击按钮可以实现上移、下移、置顶置底操作。需要注意的是,这里的操作只是在前端进行了 DOM 元素的移动,如果需要将这些操作的结果保存到后端,还需要进行相应的 AJAX 请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值