的HTML div标签位置随机序列(Random sequence of html div tags

有一个在这个GridView中有四个的div标签ID="NUMBER1" ID="NUMBER2" ID="NUMBER3" ID="NUMBER4"的价值观和我想改变随机在GridView的每一行的位置的页面顺序。什么是最好的，最简单的服务器端的方法来做到这一点。我是新使用C＃语言ASP.NET。

<body>
    <asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="QuesID" DataSourceID="SelectedPollSqlDataSource">
        <Columns>
            <asp:TemplateField HeaderText="Questions">
                <ItemTemplate>
                    <div runat="server" id="MainDiv" class="text-right col-md-12">
                        <div class="row ">
                            <div dir="rtl" class="col-md-12 text-right">
                                <p runat="server" id="BodyPTag"><%#Eval("Body") %></p>
                                <asp:Label Visible="false" ID="QuesIDLabel" runat="server" Text='<%#Eval("QuesID") %>'></asp:Label>
                            </div>
                        </div>
                        <div id="NUMBER1" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div2" class="text-right col-md-11">
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("O1") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div3" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" CssClass='<%#Eval("O1Css") %>' ID="O1Button" runat="server" Text="Option 1" />
                                </div>
                            </div>
                        </div>
                        <div id="NUMBER2" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div4" class="text-right col-md-11">
                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("O2") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div5" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" CssClass='<%#Eval("O2Css") %>' ID="O2Button" runat="server" Text="Option 2" />
                                </div>
                            </div>
                        </div>
                        <div id="NUMBER3" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div6" class="text-right col-md-11">
                                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("O3") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div7" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" CssClass='<%#Eval("O3Css") %>' ID="O3Button" runat="server" Text="Option 3" />
                                </div>
                            </div>
                        </div>
                        <div  id="NUMBER4" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div8" class="text-right col-md-11">
                                    <asp:Label ID="Label4" runat="server" Text='<%#Eval("O4") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div9" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" CssClass='<%#Eval("O4Css") %>' ID="O4Button" runat="server" Text="Option 4" />
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SelectedPollSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:GUOTSConnectionString %>" SelectCommand="SELECT DISTINCT QuesID, Body, O1, O2, O4, O3, O1Css, O2Css, O4Css, O3Css, Time, BookRange, UserID, CourseID, Code FROM Question WHERE (UserID = @userid) AND (Code = @code)">
        <SelectParameters>
            <asp:QueryStringParameter Name="code" QueryStringField="code" />
            <asp:SessionParameter Name="userid" SessionField="userid" />
        </SelectParameters>
    </asp:SqlDataSource>
</body>

下面就做你想做的。

工作FIDDLE这里

第一，改变当前的div给各行的类名，我们可以在我们的脚本挑出，如“randomDiv”。我们可以用“行”，但我怕你使用的不仅仅是这些div更多的地方。

<div id="NUMBER1" runat="server" class="row randomDiv">

然后在document准备就绪运行下面的JavaScript：

<script>
    $(document).ready(function() {

        var divs= $(".randomDiv");
        for(var i = 0; i < divs.length; i++){
            var target = Math.floor(Math.random() * divs.length -1) + 1;
            var target2 = Math.floor(Math.random() * divs.length -1) +1;
            divs.eq(target).before(divs.eq(target2));
        }

    });
</script>