【JavaScript&JQuery】原生API實現li標籤隨機排列

       最近在給我母后做一個專案，需要到隨機排列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;
}

       挺短挺實用的一篇博文，喜歡的話，請多多支援我，有什麼意見或者有更好的方法，歡迎留言交流，我每天都會上來逛逛的，謝謝大家！