Random sequence of html div tags position

问题

There is four Div tags in this GridView with ID="NUMBER1" ID="NUMBER2" ID="NUMBER3" ID="NUMBER4" values and i want to change the sequence of their position in page randomly in every row of the gridview. what is the best and most simple SERVER SIDE method to do this. I'm new to asp.net using C# language.

<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>

回答1:

the following will do what you want.

Working FIDDLE here

first, change your current divs to give each row a class name we can pick out in our script, like "randomDiv". We could have used "row" but i was afraid you were using that in more places than just these divs.

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

then on document ready run the following 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>

来源：https://stackoverflow.com/questions/21095247/random-sequence-of-html-div-tags-position

标签

jquery

ASP.NET

gridview

random