Question

情况就是这样：

我有一个带有输入元素的3列网格（顺便说一下，它可以是任何东西）

我需要以随机方式显示网格单元格......我该怎么做？

这是标记：

<div class='ui-grid-b'>

    <div class='ui-block-a'>
        <input id ='cell_1' type='radio' name='cell' value='1'><label for='cell_1'>1</label>
    </div>

    <div class='ui-block-b'>
        <input id ='cell_2' type='radio' name='cell' value='2'><label for='cell_2'>2</label>
    </div>

    <div class='ui-block-c'>
         <input id ='cell_3' type='radio' name='cell' value='3'><label for='cell_3'>3</label>
    </div>

    <div class='ui-block-a'>
         <input id ='cell_4' type='radio' name='cell' value='4'><label for='cell_4'>4</label>
    </div>

    <div class='ui-block-b'>
         <input id ='cell_5' type='radio' name='cell' value='5'><label for='cell_5'>5</label>
    </div>

    <div class='ui-block-c'>
         <input id ='cell_6' type='radio' name='cell' value='6'><label for='cell_6'>6</label>
    </div>

Answer 1

通过改组的Fisher-Yates算法是可能的。 Here's the link to the visualisation。这是功能。你只需要传递一个数组：

function shuffle(array) {
    var copy = [],
        n = array.length,
        i;

    // While there remain elements to shuffle…
    while (n) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * n--);

        // And move it to the new array.
        copy.push(array.splice(i, 1)[0]);
    }

    return copy;
}

有两种方法可以做到这一点：

方法1 - 对DOM中已有的元素进行随机播放

你可以在DOM中保留元素，通过jQuery将其删除，然后将其重新组合并放回去。请注意，出于样式设置的目的，您必须将data-role=none添加到inputs，以便稍后对其进行样式设置。 JS代码：

$(document).on("pageinit", "#test", function () {
    //get all the elemnets inside grid view and clone it
    var $el = $(".ui-grid-b").children("div").clone().get();

    //shuffle the elements
    var $shuffledEl = shuffle($el);

    //loop through the elements to set the class for that element depending on their index - this might be reduced to lesser lines if two tile grid is used
    var i = 0;
    for (; i < $shuffledEl.length; i++) {
        var cl = "";
        if ([0, 3].indexOf(i) !== -1) {
            cl = "ui-block-a";
        } else if ([1, 4].indexOf(i) !== -1) {
            cl = "ui-block-b";
        } else {
            cl = "ui-block-c";
        }
        $($shuffledEl[i]).attr("class", cl);
    }
    //clear out the old stuff and add the shuffled elements
    $(".ui-grid-b").html($($shuffledEl));
    //refresh the radiobuttons
    $(this).find("input").checkboxradio().checkboxradio("refresh");
});

演示：http://jsfiddle.net/hungerpain/nJbCt/

方法2 - 在插入DOM

之前对元素进行随机播放

这样您就不需要开始使用任何HTML。

$(document).on("pageinit", "#test", function () {

    //6 elements - so 6 items in array
    var numbers = shuffle([1, 2, 3, 4, 5, 6]);

    var i = 0;

    //create the skeletal element - <div><input><label></div>
    var $div = $("<div/>").append($("<input/>", {
        "type": "radio",
            "name": "cell"
    }), $("<label/>"));

    //loop through shuffled numbers
    for (; i < numbers.length; i++) {
        //define class based on index - can be reduced if 2 tile grid is used
        var cl = "";
        if ([0, 3].indexOf(i) !== -1) {
            cl = "ui-block-a";
        } else if ([1, 4].indexOf(i) !== -1) {
            cl = "ui-block-b";
        } else {
            cl = "ui-block-c";
        }

        //clone the div el
        var $clone = $div.clone().attr("class", cl);
        //add the attributes and values on the fly - dynamic
        $clone.find("input").attr({
            "id": "cell_" + numbers[i],
                "value": numbers[i]
        });
        $clone.find("label").attr({
            "for": "cell_" + numbers[i]
        }).html(numbers[i]);

        //add the clone to DOM
        $clone.appendTo(".ui-grid-b");
    }
    //refresh the styles of the complete page
    $(this).trigger("create");
});

演示：http://jsfiddle.net/hungerpain/7QGVJ/

使用三列网格

的注意事项

您必须以硬编码的方式添加ui-block-*。我不知道如果有更好的方法，但任何方式都太hacky。看看这段代码，

  if ([0, 3].indexOf(i) !== -1) {
     cl = "ui-block-a";
  } else if ([1, 4].indexOf(i) !== -1) {
     cl = "ui-block-b";
  } else {
     cl = "ui-block-c";
  }

检查一个特定的索引是......我很满意。更好的方法是使用两列网格，您可以在其中检查偶数和奇数i。这为我们提供了一种更通用的方法来处理这个问题

  if (i % 2 === 0) {
     cl = "ui-block-a";
  } else 
     cl = "ui-block-c";
  }

希望这有帮助！

JqueryMobile：JQM GRID的SORTING单元格

1 个答案:

方法1 - 对DOM中已有的元素进行随机播放

方法2 - 在插入DOM

使用三列网格