html div标签位置的随机序列 [英] Random sequence of html div tags position
问题描述
此GridView中有四个Div标签，其中 ID =NUMBER1 ID =NUMBER2 ID =NUMBER3 ID =NUMBER4值，我想在每页中随机更改它们在页面中的位置顺序gridview的一行。
什么是最好，最简单的SERVER SIDE方法来做到这一点。
我是使用C＃语言的新手。
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>
推荐答案
以下将做你想做的事。
首先，改变你当前的div，为每行提供一个我们可以在脚本中选择的类名，比如randomDiv。我们可以使用行，但我担心你在更多的地方使用，而不仅仅是这些div。
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">
然后在文档上准备运行以下javascript代码：
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>
这篇关于html div标签位置的随机序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
