有這樣的需求,就是對 li 列表進行排序,剛開始覺得木有什麼頭緒,就想起以前好像array.prototype.sort.call可以這樣做,可以實現物件的排序,比如
那麼對於乙個dom列表,怎麼做呢。下面有乙個js原生版本的。
dom結構
class="datalist">
class="item">
class="item-id">1span>
class="item-name">aa_90span>
class="item-count">90span>
li>
class="item">
class="item-id">2span>
class="item-name">aa_52span>
class="item-count">52span>
li>
class="item">
class="item-id">3span>
class="item-name">aa_57span>
class="item-count">57span>
li>
class="item">
class="item-id">4span>
class="item-name">aa_36span>
class="item-count">36span>
li>
ul>
js**:
/**
* 對list排序
*@param flag [正逆序標記]
*@param $domlist [參與排序的列表]
*@return [返回重新排序過的列表]
*/var sortdom = function
(flag,$domlist));
return
$newlist;
}
呼叫
$('#sort-btn').click(function
());
效果:排序前:
排序後:
ul,li控制項的封裝 menu,list列表
控制項本身沒有什麼技術含量。只是乙個簡單的封裝。新專案中前端開發人員專門負責編寫html 整體看過 有很多地方前端人員都使用了ul li的布局。像menu 列表 商戶列表也都是ul li的形式。所以就寫這了個通用的控制項。主要的思路 儘量減少後端開發人員html 的拼接過程,重點關心資料的讀取。從h...
使用ul li和不適用ul li的區別
在製作使用ul li和不適用ul li的區別 1.使用ul li會使其中的內容和使用p標籤一樣,是乙個塊級元素,會使內容自動分行,使用後它的內容的內邊距距離邊框較遠 2.不適用ul li標籤,內容是行內元素,它的內邊距距離邊框比較近 3.複習 給標籤a設定居中或設定其位置,都需要先給a標籤設定成塊級...
UL Li常用效果
li 的格式化 a 運用css格式化列表符 ul li b 假如你想將列表符換成影象,則 ul li c 為了左對齊,可以用如下 ul d 假如想給列表加背景色,可以用如下 ul ul li e 假如想給列表加mouseover背景變色效果,可以用如下 ul ul li a ul li a hove...