js簡單實現(xiàn)交換Li的值
更新時間：2014年05月22日 09:10:10 作者：
這篇文章主要介紹的是通過js簡單實現(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) {
//和下面的一個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) {
//和下面的一個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>
相關(guān)文章
JavaScript在IE和Firefox上的差異及相互替代的實現(xiàn)方法
我們經(jīng)常在處理ie和firefox下的js總會碰到一些兼容問題，下面是些總結(jié)，希望大家仔細(xì)看看研究2008-06-06
使用plupload自定義參數(shù)實現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實現(xiàn)多文件上傳的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
使用JavaScript和HTML實現(xiàn)一個精美的計算器
計算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一,可以幫助我們進行簡單的數(shù)學(xué)運算,在本博文中,我將使用JavaScript編寫一個漂亮的計算器,并添加加減乘除功能,感興趣的同學(xué)可以自己動手嘗試一下2023-09-09
這篇文章給大家總結(jié)下JavaScript數(shù)組去重的幾種方法，面試中也經(jīng)常會遇到這個問題。文中給大家引申的還有合并數(shù)組并去重的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2021-10-10
解決bootstrap中使用modal加載kindeditor時彈出層文本框不能輸入的問題
這篇文章主要介紹了解決bootstrap中使用modal加載kindeditor時彈出層文本框不能輸入的問題,需要的朋友可以參考下2017-06-06
JavaScript動畫原理之如何使用js進行動畫效果的實現(xiàn)
在現(xiàn)在做頁面很多時候都會用上動畫效果,比如下拉菜單,側(cè)邊搜索欄,層的彈出與關(guān)閉等等,下面這篇文章主要給大家介紹了關(guān)于JavaScript動畫原理之如何使用js進行動畫效果實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JS實現(xiàn)的圖片自動輪換效果，有具體的實現(xiàn)思路及截圖，希望對大家學(xué)習(xí)有所幫助2014-04-04
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了JS簡單去除數(shù)組中重復(fù)項的方法,涉及javascript針對數(shù)組的遍歷、判斷與運算相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理的內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11