Improve performance of setting sibling attributes

Question

I have this jquery code that works the way I want it to. It highlights the color of a row when the child is selected. However, it is slow. This is the lines of code:

chkStation.parent().parent().parent().parent().parent().closest("tr").siblings().find('td:contains(' + districtName + ')').attr('style','background-color:lime');  

chkStation.parent().parent().parent().parent().parent().closest("tr").siblings().find('td:contains(' + districtName + ')').siblings().attr('style','background-color:lime');

Does anyone have any suggestions in how to speed up the code above?

This is the complete function when the user checks the station with the additions from the previous posts (thanks):

$("[id*=Station]").live("click", function () 
{
    var chkStation = $(this);

    if (chkStation.is(":checked"))   
    {
        //Set the station row to green
         chkStation.closest("tr").css('background-color', 'lime');

        var districtID = chkStation.parent().parent().parent().parent().parent().parent().attr('id'); 
        var districtName = districtID.substring(3);

        //Sets the district row green and checks the district checkbox
        var $stationDistrict = chkStation.parent().parent().parent().closest("tr").siblings().find('td:contains(' + districtName + ')');
        $stationDistrict.css("background-color", "lime" );  
        $stationDistrict.siblings().css( "background-color", "lime" );      

        //Checks the district checkbox
        var $districtCkBox = $stationDistrict.find('input:checkbox');
        $districtCkBox.attr("checked", true);

    }
    else 
    {
        //Sets the station row gray
         chkStation.closest("tr").css('background-color', '#DEDFDE');

        //If there are no checked stations under this district,
        //the district is unchecked and color is set to gray   
        //get the number of unchecked checkbox
        var numCkStations = $(this).closest("tr").find(":checkbox[checked='checked']").length;

        if(numCkStations == 0)
        {
            var districtID = chkStation.parent().parent().parent().parent().parent().parent().attr('id'); 
            var districtName = districtID.substring(3);

            var $stationDistrict = chkStation.parent().parent().parent().closest("tr").siblings().find('td:contains(' + districtName + ')');
            $stationDistrict.css("background-color", "#DEDFDE" );  
            $stationDistrict.siblings().css( "background-color", "#DEDFDE" );  

            //Unchecks the district checkbox
            var $districtCkBox = $stationDistrict.find('input:checkbox');
            $districtCkBox.attr("checked", false);
        }  
    }
});

Is there a way to highlight the rows a quicker way than what I am doing now?

Below is the HTML...as requested:

 <form id="form1" runat="server">   
     <cc1:CoolGridView ID="ParentGridView" runat="server" AllowSorting="True" OnSorting="GridView1_Sorting" 
        AutoGenerateColumns="False" OnRowDataBound="gv_RowDataBound"
        BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" 
        Height="550px" Width="525px" HorizontalAlign="Left" DefaultColumnWidth="140px">
     <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle>

    <Columns>
        <asp:TemplateField HeaderText="District" SortExpression="district" HeaderStyle-Width="200px">
            <ItemTemplate>
            <a href="javascript:DivExpandCollapse('div<%# Eval("district")%>');">
            <img id="imgdiv<%# Eval("district")%>" width="10px" border="0" src="Images/plus.png" /> </a> 
            <asp:CheckBox ID="District" Text='<%#Bind("district")%>' runat="server" />
            </ItemTemplate>
            <HeaderStyle Width="200px"></HeaderStyle>
            <ItemStyle HorizontalAlign="Center" Width="200px"></ItemStyle>
        </asp:TemplateField> 

        <asp:TemplateField HeaderText="Server" HeaderStyle-Width="280px">
        <ItemTemplate>
        <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" >
           <asp:ListItem>A1</asp:ListItem>
           <asp:ListItem>A2</asp:ListItem>
           <asp:ListItem>Both</asp:ListItem>
        </asp:DropDownList>

        <tr><td colspan="100%">  
        <div id="div<%# Eval("district") %>" style="display:none; position: relative; left: 15px; overflow: auto">
            <asp:GridView ID="StationGridView" runat="server" AutoGenerateColumns="False"  OnSorting="GridView1_Sorting" 
             BorderStyle="Ridge" BorderWidth="2px"  HorizontalAlign="Center"
             GridLines="Both" ShowHeader="True" ShowFooter="False" >
            <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle>
                <Columns>
                    <asp:TemplateField HeaderText="Station"  SortExpression="number">
                    <ItemTemplate>
                        <asp:CheckBox ID="Station" Text='<%#Bind("number")%>' runat="server"/>
                    </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Server" >
                    <ItemTemplate>
                        <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" >
                            <asp:ListItem>A1</asp:ListItem>
                            <asp:ListItem>A2</asp:ListItem>
                            <asp:ListItem>Both</asp:ListItem>
                        </asp:DropDownList>
                    </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle>
                    </asp:TemplateField>

                    <asp:BoundField DataField="TimeZone" HeaderText="Time Zone" SortExpression="timeZone">
                        <ItemStyle HorizontalAlign="Center" Width="130px" />
                    </asp:BoundField>

                    <asp:BoundField DataField="ServerType" HeaderText="Server Type" SortExpression="serverType">
                        <ItemStyle HorizontalAlign="Center" Width="135px" />
                    </asp:BoundField>               
                </Columns>
                <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
             </asp:GridView>                   
        </div> 
        </td></tr> 
        </ItemTemplate>
        <HeaderStyle Width="305px"></HeaderStyle>
        <ItemStyle HorizontalAlign="Center" Width="280px"/>
        </asp:TemplateField>                                    
    </Columns>
<BoundaryStyle BorderColor="Gray" BorderWidth="1px" BorderStyle="Solid"></BoundaryStyle>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
     </cc1:CoolGridView>

<div style="float: right; width: 27%; height: 234px; margin-left: 0px;" 
         id="RightColumn" align="center" dir="ltr"> 
    <p style="height: 25px; width: 230px; margin-left: 5px;"> </p>

    <asp:Button ID="BtnCreateXMLFile" runat="server" Height="51px" 
        style="margin-bottom: 0px; text-align: center; margin-left: 10px;" 
        Text="Create XML File" Width="185px" onclick="BtnCreateXMLFile_Click"/> 

    <p style="height: 24px; width: 226px; margin-left: 5px;"> </p>

    <asp:Button ID="BtnClearSelections" runat="server" Height="35px"
        style="margin-bottom: 0px; text-align: center; margin-left: 10px"
        Text="Clear Selections" Width="150px" 
        onclick="BtnClearSelections_Click"/>   
</div>               
</form>

Define "slow". Also, how did you measure just how slow this is? — Eric J., Oct 31 '13 at 16:10
possible duplicate of [Parent(), faster alternative?](http://stackoverflow.com/questions/8789362/parent-faster-alternative) — Eric J., Oct 31 '13 at 16:18
I have added the HTML. It is a nested gridview. When the user checks a checkbox on one of the nested gridview rows, I want the parent row of the nested grid to be highlighted and the parent checkbox to be checked. (I have not gotten far enough to check the parent checkbox.) — Gloria Santin, Oct 31 '13 at 17:39

score 0 · Answer 1 · answered Oct 31 '13 at 16:35

Well, for starters, most of the first line is repeated in the second, so you can cut out all that duplicated code (and thus duplicated effort) by setting at temporary variable to the duplicated bit:

var $found = chkStation.parent().parent().parent().parent().parent().closest("tr").siblings().find('td:contains(' + districtName + ')');

$found.attr('style','background-color:lime');  
$found.siblings().attr('style','background-color:lime');

So that's one immediate big saving, without changing anything of the actual logic.

Next, we can cut down on all those parent() calls. In fact we can probably get rid of them all entirely, since closest() will climb up the tree to find the tr element anyway.

You haven't shown us the HTML that this applies to, but assuming it doesn't include a nested table, then you can simply drop all those parent() calls entirely.

(If it does include a nested table, then you can still reduce it a lot, but I'd need to see the HTML to give an accurate solution)

Finally, your code appears to be setting the background colour of the all td elements in a row. You'll get better performance if you simply set it on the tr. In fact, this might even mean you can get away without needing two lines of code here.

There's probably even more that could be done; seeing your HTML might have helped me with that, but I'll stop here, as I've covered quite a lot already.

I hope that gives you some food for thought.

That makes it a little faster. When I set the variable, I did not use the '$'. I have updated the question to include the markup. Thanks for your help! — Gloria Santin, Oct 31 '13 at 17:57
How can I set the background color by setting the 'tr'? I change the background color of the nested grid rows also and would use it there. — Gloria Santin, Oct 31 '13 at 18:08

Improve performance of setting sibling attributes

1 Answers1