【JavaScript&JQuery】原生API实现li标签随机排列

       最近在给我母后做一个项目，需要到随机排列li元素，看了网上好多插件还有好多源码，感觉有点儿复杂，而且和我项目并不是很友好，不方便嫁接过来，于是就自己写了一个方法，看上去还不错，就放出来分享一下。

       内容很短，而且暂时没有封装，其实封装也很简单的，但是我这儿直接写直接用的。。。就用的不是封装的套路了，废话不多说，直接代码贴起！

下面是html内容：

<div class='productsBox'>
    <ul class='products'>
        <li id='item_1'>列表1li>
        <li id='item_2'>列表2li>
        <li id='item_3'>列表3li>
        <li id='item_4'>列表4li>
        <li id='item_5'>列表5li>
    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;
}

       挺短挺实用的一篇博文，喜欢的话，请多多支持我，有什么意见或者有更好的方法，欢迎留言交流，我每天都会上来逛逛的，谢谢大家！