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