亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

jQuery如何實現已上樹的dom元素隨機排序?

jQuery如何實現已上樹的dom元素隨機排序?

桃花長相依 2019-02-27 18:46:59
上面的代碼,目前p標簽在game-box中是固定順序排列的,我想實現每次刷新頁面p的排列順序都不一樣,尤其是開頭和結尾。目前我找到了一種不太好的方法,但是第一個元素經常不是9就是10,和我要的不一樣。//這個方法不夠好$(".game-box p").each(function(){    if(Math.random() <= 0.5){        $(this).prependTo($(this).parent());                }})請問有沒有更好的思路呢?如果是下面的table tr td應該怎么做呢?
查看完整描述

2 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

// 獲取DOM元素

var $game_box = $('.game-box'),

    $game_box_list = $('.game-box p');


// 列表亂序后添加到game_box

$game_box.html(arrayRandomSort($game_box_list));


// 數據亂序方法

function arrayRandomSort(array) {

    var index = array.length;

    //開始遍歷

    for (var i = array.length; i > 0; i--) {

        var random = parseInt(Math.random() * index);

        index--;

        //交換位置

        var last = array[index];

        array[index] = array[random];

        array[random] = last;

    }

    return array;

}

我的思路是,把獲取到的DOM數組亂序后再放到game-box下。



// 獲取DOM元素

var $table = $('table'),

    $tr_list = $('table tr'),

    $td_list = $('table tr td');


// 生成亂序的td列表

var random_list = arrayRandomSort($td_list);


// 獲取每一行的td數量

var row_count = [];

$tr_list.each((i, el) => {

    row_count.push($(el).find('td').length);

});


// 根據每一行td的數量顯示

$tr_list.each((i, el) => {

    $(el).html(random_list.splice(0, row_count[i]));

});


// 數據亂序方法

function arrayRandomSort(array) {

    var index = array.length;

    //開始遍歷

    for (var i = array.length; i > 0; i--) {

        var random = parseInt(Math.random() * index);

        index--;

        //交換位置

        var last = array[index];

        array[index] = array[random];

        array[random] = last;

    }

    return array;

}

這個應該就是你想要的效果


查看完整回答
反對 回復 2019-03-09
  • 2 回答
  • 0 關注
  • 427 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號