jquery 随机排列<li> 在线等 急。。。

html-css07

jquery 随机排列<li> 在线等 急。。。,第1张

<!DOCTYPE HTML>

<html>

<head>

<meta charset=UTF-8>

<meta name="keywords" content="白菜编辑部">

<title>白菜编辑部</title>

<style type="text/css">

</style>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript">

jQuery (function ($)

    {

    var p = $ ('div.icList>ul.aaa')

    var array = p.children ('li')

    array.sort (function ()

    {

    var rand = Math.random ()

    if (rand > 0.5)

    {

    return 1

    }

    else

    {

    return -1

    }

    })

    array.each (function (i, dom)

    {

    p.append ($ (this))

    })

    })

</script>

</head>

<body>

<div class="icList">

<ul class="aaa">

<li>111111</li>

<li>222222</li>

<li>333333</li>

<li>444444</li>

<li>555555</li>

<li>666666</li>

</ul>

</div>

</body>

</html>

<script type="text/javascript">

var count = 0 //循环计数器

var jicount = 0 //奇数计数器

var oucount = 0 //偶数计数器

var arr = new Array() //储存随机数数组

var jishu = new Array() //储存奇数数组

var oushu = new Array() //储存偶数数组

while(count <10){//为奇偶数组赋值

arr[count] = (Math.round((Math.random()*9)+1))

if(arr[count]%2==1){

jishu[jicount] = arr[count]

jicount++

}else{

oushu[oucount] = arr[count]

oucount++

}

count++

}

document.write(jishu.sort(function(a,b){return a-b})) //奇数数组排序输出

document.write("<br />")

document.write(oushu.sort(function(a,b){return a-b})) //偶数数组排序输出

</script>

有一点注释,看不懂再问我。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<ul id="getmyid">

<li>苹果</li>

<li>桔子</li>

<li>香蕉</li>

<li>石榴</li>

<li>桃子</li>

<li>菠萝</li>

</ul>

<script type="text/javascript">

var ul = document.getElementById("getmyid"),

lis = Array.prototype.slice.call(ul.childNodes, 0)

var i = lis.length

while(i-- > 0)ul.insertBefore(lis[i], lis[parseInt(Math.random() * lis.length)])

</script>

</body>

</html>

给你个原生代码的,直接用保存就可以用了,原理就是,随机把原来的 li 插入到另一个 li 前面,每个都执行一次。代码很简单,比他们用了 jQuery 的都少,应该好理解了