ul li列表排序

2021-07-04 23:54:51 字數 1410 閱讀 7678

有這樣的需求,就是對 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...