提高设置同级属性的性能

Question

我有这个 jquery 代码可以按照我想要的方式工作。 它选择了选择子项时突出显示行的颜色。但是，它很慢。 这是代码行：

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'); 

有人对如何加快上面的代码有任何建议吗？

这是当用户使用之前帖子的添加检查站时的完整功能（谢谢）：

$("[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);
        }  
    }
});

有没有比我现在做的更快的方法来突出显示行？

以下是 HTML...根据要求：

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

Answer 1

好吧，对于初学者来说，第一行的大部分内容在第二行中重复，因此您可以通过将临时变量设置为重复的位来删除所有重复的代码（以及因此重复的工作）：

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');

所以这是一个立竿见影的大节省，无需改变任何实际逻辑。

接下来，我们可以减少所有parent() 的调用。事实上，我们可能可以完全摆脱它们，因为closest() 无论如何都会爬上树找到tr 元素。

您尚未向我们展示这适用的 HTML，但假设它不包含嵌套表，那么您可以完全删除所有这些 parent() 调用。

（如果确实包含嵌套表，那么您仍然可以减少很多，但我需要查看 HTML 才能给出准确的解决方案）

最后，您的代码似乎正在连续设置所有td 元素的背景颜色。如果您简单地将其设置在tr 上，您将获得更好的性能。事实上，这甚至可能意味着您无需在这里写两行代码就可以摆脱困境。

可能还有更多可以做的事情；看到你的 HTML 可能对我有帮助，但我会停在这里，因为我已经介绍了很多。

我希望这能给你一些思考。