最近在給我母后做一個項目,需要到隨機排列li元素,看了網上好多插件還有好多源碼,感覺有點兒複雜,而且和我項目並不是很友好,不方便嫁接過來,於是就自己寫了一個方法,看上去還不錯,就放出來分享一下。
內容很短,而且暫時沒有封裝,其實封裝也很簡單的,但是我這兒直接寫直接用的。。。就用的不是封裝的套路了,廢話不多說,直接代碼貼起!
下面是html內容:
<div class='productsBox'>
<ul class='products'>
<li id='item_1'>列表1</li>
<li id='item_2'>列表2</li>
<li id='item_3'>列表3</li>
<li id='item_4'>列表4</li>
<li id='item_5'>列表5</li>
</ul>
</div>
然後到JQ隨機排列部分
// 獲取所有li標籤數組, $(".productsBox > ul > li").toArray();也是可以的
var arr = $(".productsBox > ul").children().toArray();
var bigLength = arr.length;// 獲取其最大長度
var randomString = "";// 結果字符串
for(var i = 0; i < bigLength; i++){// 遍歷所有數組元素內容
// 隨機生成剩餘量
var rand = parseInt(Math.random() * (arr.length));
// 將包含自身li的html內容添加到字符串中
randomString += arr[rand].outerHTML;
arr.splice(rand, 1);// 刪除當前操作的數組元素
}
$(".products").empty();// 清空原有ul下的li標籤
$(".products").append(randomString);// 追加html
顯而易見,註釋很清晰,應該不難理解,思路挺簡單的,就是循環的隨機獲取數組內容,然後刪掉提取出來的項。就這麼簡單,如果項封裝的話,直接放到一個function裏面就行了,然後參數就是需要操作的array,末尾return結果字符串即可,參數如果後面不需要的話,function裏面就不用臨時創建一個用來操作的array了。下面放一個完全封裝了的。
function randomGetString(arr){
var tempArr = [].concat(arr);// 創建操作數組
var bigLength = arr.length;// 獲取其最大長度
var randomString = "";// 結果字符串
for(var i = 0; i < bigLength; i++){// 遍歷所有數組元素內容
// 隨機生成剩餘量
var rand = parseInt(Math.random() * (tempArr.length));
// 將包含自身li的html內容添加到字符串中
randomString += tempArr[rand].outerHTML;
tempArr.splice(rand, 1);// 刪除當前操作的數組元素
}
return randomString;
}
挺短挺實用的一篇博文,喜歡的話,請多多支持我,有什麼意見或者有更好的方法,歡迎留言交流,我每天都會上來逛逛的,謝謝大家!