js簡(jiǎn)單實(shí)現(xiàn)交換Li的值
更新時(shí)間：2014年05月22日 09:10:10 作者：
這篇文章主要介紹的是通過(guò)js簡(jiǎn)單實(shí)現(xiàn)交換Li的值,需要的朋友可以參考下
交接li的值.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>交換Li的值</title>
<script type="text/javascript">
window.onload= function() {
var lis = document.getElementById("ulList").childNodes;
for (var i = 0; i < lis.length; i++) {
var myli = lis[i];
//判斷是否是標(biāo)簽
if (myli.nodeType == 1) {
//和下面的一個(gè)li交換位置
myli.onclick = function() {
if (this.nextElementSibling) {
var nextli = this.nextElementSibling;//這里只能用this,不能用myli
document.getElementById("ulList").insertBefore(nextli, this);
}
};
}
}
}
</script>
</head>
<body>
<ul id="ulList">
<li>北京</li>
<li>山西</li>
<li>上海</li>
<li>天津</li>
<li>河南</li>
</ul>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>交換Li的值</title>
<script type="text/javascript">
window.onload= function() {
var lis = document.getElementById("ulList").childNodes;
for (var i = 0; i < lis.length; i++) {
var myli = lis[i];
//判斷是否是標(biāo)簽
if (myli.nodeType == 1) {
//和下面的一個(gè)li交換位置
myli.onclick = function() {
if (this.nextElementSibling) {
var nextli = this.nextElementSibling;//這里只能用this,不能用myli
document.getElementById("ulList").insertBefore(nextli, this);
}
};
}
}
}
</script>
</head>
<body>
<ul id="ulList">
<li>北京</li>
<li>山西</li>
<li>上海</li>
<li>天津</li>
<li>河南</li>
</ul>
</body>
</html>
您可能感興趣的文章:
- JS交換變量的方法
- js交換排序 冒泡排序算法（Javascript版）
- js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容的具體實(shí)現(xiàn)方法
- js簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊左右運(yùn)動(dòng)的方法
- js實(shí)現(xiàn)同一頁(yè)面多個(gè)運(yùn)動(dòng)效果的方法
- js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
- js實(shí)現(xiàn)同一頁(yè)面多個(gè)不同運(yùn)動(dòng)效果的方法
- js實(shí)現(xiàn)交換運(yùn)動(dòng)效果的方法
相關(guān)文章
JavaScript在IE和Firefox上的差異及相互替代的實(shí)現(xiàn)方法
我們經(jīng)常在處理ie和firefox下的js總會(huì)碰到一些兼容問(wèn)題，下面是些總結(jié)，希望大家仔細(xì)看看研究2008-06-06
使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
使用JavaScript和HTML實(shí)現(xiàn)一個(gè)精美的計(jì)算器
計(jì)算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一,可以幫助我們進(jìn)行簡(jiǎn)單的數(shù)學(xué)運(yùn)算,在本博文中,我將使用JavaScript編寫(xiě)一個(gè)漂亮的計(jì)算器,并添加加減乘除功能,感興趣的同學(xué)可以自己動(dòng)手嘗試一下2023-09-09
這篇文章給大家總結(jié)下JavaScript數(shù)組去重的幾種方法，面試中也經(jīng)常會(huì)遇到這個(gè)問(wèn)題。文中給大家引申的還有合并數(shù)組并去重的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2021-10-10
解決bootstrap中使用modal加載kindeditor時(shí)彈出層文本框不能輸入的問(wèn)題
這篇文章主要介紹了解決bootstrap中使用modal加載kindeditor時(shí)彈出層文本框不能輸入的問(wèn)題,需要的朋友可以參考下2017-06-06
JavaScript動(dòng)畫(huà)原理之如何使用js進(jìn)行動(dòng)畫(huà)效果的實(shí)現(xiàn)
在現(xiàn)在做頁(yè)面很多時(shí)候都會(huì)用上動(dòng)畫(huà)效果,比如下拉菜單,側(cè)邊搜索欄,層的彈出與關(guān)閉等等,下面這篇文章主要給大家介紹了關(guān)于JavaScript動(dòng)畫(huà)原理之如何使用js進(jìn)行動(dòng)畫(huà)效果實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
JS圖片自動(dòng)輪換效果實(shí)現(xiàn)思路附截圖
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動(dòng)輪換效果，有具體的實(shí)現(xiàn)思路及截圖，希望對(duì)大家學(xué)習(xí)有所幫助2014-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法
這篇文章主要介紹了JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法,涉及javascript針對(duì)數(shù)組的遍歷、判斷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理的內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11