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)文章
許愿墻中用到的函數(shù)...2006-10-10
動態(tài)生成js類的實現(xiàn)方法...2007-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)答題倒計時，自定義計時器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
日常我們在開發(fā)小程序的時候，總是希望把數(shù)據(jù)提交回數(shù)據(jù)庫進(jìn)行存儲，那在小程序中該如何訪問數(shù)據(jù)庫呢？本篇我們就介紹一下具體的思路2022-08-08
今天開發(fā)的時候，遇到要點(diǎn)擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實現(xiàn)方式,下面通過本文給大家分享JS點(diǎn)擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)列表按字母排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設(shè)置的方法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了JavaScript中this的用法,結(jié)合實例形式分析了this的功能、常見用法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
JavaScript實現(xiàn)跟隨滾動緩沖運(yùn)動廣告框
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)跟隨滾動緩沖運(yùn)動廣告框，頁面左右兩邊跟隨式廣告框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
控制頁面按鈕在后臺執(zhí)行期間不重復(fù)提交的JS方法
下面的代碼可以避免這種情況的發(fā)生，要等第一次執(zhí)行完返回數(shù)據(jù)到前臺后才能提交第二次。2013-06-06