Is there a JQuery solution to this

See more:

C#

jQuery

With the following grid how is it possible to access the rows using JQuery. I have several grids using the same structure so I wanted to use one method to access their data in javascript. Therefore I thought about using the Class tag method to access the like elements?

<pre lang="xml"><asp:GridView ID="AvailableRolesGrid" runat="server" CssClass="AutorisationGrid"
    AutoGenerateColumns="False" AutomaticPostbackEnabled="False"
    onrowdatabound="AvailableGrid_RowDataBound" EnableViewState="False"
    ShowHeader="False" GridLines="None">
    <RowStyle CssClass="roledataRow" />
    <Columns>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleIdLbl" runat="server" Text='' CssClass="roledataItem" dataFld="ItemId"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleDescriptionLbl" runat="server" Text='<%# Bind("Description") %>' CssClass="roledataItem" dataFld="ItemDescription"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberRolesLbl" runat="server" Text=';' CssClass="roledataItem" dataFld="MemberRoles"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberTasksLbl" runat="server" Text=';' CssClass="roledataItem" dataFld="MemberTasks"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberOperationsLbl" runat="server" Text=';' CssClass="roledataItem" dataFld="MemberOperations"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberAuthorizationLbl" runat="server" Text=';' CssClass="roledataItem" dataFld="MemberAuthorizations"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField  ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleMemberAttributeLbl" runat="server" Text=';' CssClass="roledataItem" dataFld="MemberAttributes"></asp:Label>
            </ItemTemplate>
            <HeaderStyle CssClass="hiddenColumn" />
            <ItemStyle CssClass="hiddenColumn" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <img src="images/signpost.gif" style="float: left; text-align: left; vertical-align: middle;" alt="image" />
            </ItemTemplate>
            <ItemStyle Width="30px" />
        </asp:TemplateField>

        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:Label ID="RoleName" runat="server" Text='<%# Bind("Name") %>' CssClass="roledataItem" dataFld="Name"></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle Width="150px" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:ImageButton ID="ReportEditButton" runat="server" CausesValidation="false" ImageUrl="../images/document_edit.jpg"
                    OnClientClick="return false;"
                    ToolTip="Click to edit" AlternateText="Edit" CssClass="editButton" />
            </ItemTemplate>
            <ItemStyle Width="25px" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:ImageButton ID="ReportDeleteButton" runat="server" CausesValidation="false"
                    ImageUrl="../images/document_error.jpg" OnClientClick="return false;"
                    ToolTip="Click to delete" AlternateText="Delete" CssClass="deleteButton" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

I have accessed the following using a mix of JQuery and standard java which works fine but I just wanted to know if there was a faster more concise way using all JQuery:

var grid = $(".AutorisationGrid");
if (grid.length > 0) {
    for (gridindex = 0; gridindex < grid.length; gridindex++) {
        if (grid[gridindex].rows.length > 0) {
            for (rowindex = 0; rowindex < grid[gridindex].rows.length; rowindex++) {
                var itemId = grid[gridindex].rows[rowindex].cells[0].innerText;
                var description = grid[gridindex].rows[rowindex].cells[1].innerText;
                var memberRoles = grid[gridindex].rows[rowindex].cells[2].innerText;
                var membertasks = grid[gridindex].rows[rowindex].cells[3].innerText;
                var memberOperations = grid[gridindex].rows[rowindex].cells[4].innerText;
                var memberAuthorizations = grid[gridindex].rows[rowindex].cells[5].innerText;
                var memberAttributes = grid[gridindex].rows[rowindex].cells[6].innerText;
                var itemname = grid[gridindex].rows[rowindex].cells[7].innerText;

                // generate checkboxes
            }
        }
    }
}

Doing the following QUery gives me all the columns for all the rows at once but I can't tell where one row ends and another starts, which is my real problem, so is there a way to access all the grids, all the rows in the grids and then all the columns so I know where one row ends and another begins?

var rowDataItems = $(".roledataItem");
for (i = 0; i < rowDataItems.length; i++) {
    switch (rowDataItems[i].dataFld) {
        case "ItemId":
            var roleItemId = rowDataItems[i].innerText;
            break;
        case "MemberRoles":
            var roleMemberRoles = rowDataItems[i].innerText;
            break;
        case "MemberTasks":
            var roleMemberTasks = rowDataItems[i].innerText;
            break;
        case "MemberOperations":
            var roleMemberOperations = rowDataItems[i].innerText;
            break;
        case "Name":
            var roleItemName = rowDataItems[i].innerText;
            break;
        case "ItemDescription":
            var roleItemDescription = rowDataItems[i].innerText;
            break;
        case "MemberAuthorizations":
            var roleMemberAuthorizations = rowDataItems[i].innerText;
            break;
        case "MemberAttributes":
            var roleMemberAttributes = rowDataItems[i].innerText;
            break;
    }
}

So with this I have all the columns over all the rows. How do I reformat the jQuery to get what I want?