Question

我有一些HTML下拉菜单，然后根据选择我然后在表格中突出显示相应的列标题。我这样做是通过更改<td>标记的css类来实现的：

$("#searchcolour").attr("class", "filledselect");
$("#searchtask").attr("class", "filledselect");
$("#searchshape").attr("class", "filledselect");
$("#searchpivot").attr("class", "filledselect");

突出显示的列标题取决于已选择的列标题。可以选择多达20个列标题。这个用于突出显示的额外代码会在IE中更新我的页面延迟1-2秒（jquery也会同时过滤表格结果）。其他浏览器的速度很好。

我能以更快的方式实现这种效果吗？

Answer 1

试试这个：

$("#searchcolour").addClass("filledselect");
$("#searchtask").addClass("filledselect");
$("#searchshape").addClass("filledselect");
$("#searchpivot").addClass("filledselect");

Answer 2

这取决于您如何将选择映射到表格单元格。但我相信如果您使用ID选择器（例如您的示例状态），则不需要1-2秒，因此必须存在另一个瓶颈。

为什么不将属性应用于与表ID匹配的每个菜单项？

<ul id="menu">
  <li><a href="#" rel="searchcolour">colour</a></li>
  <li><a href="#" rel="searchtask">task</a></li>
</ul>

<script>
$('#menu a').click(function() {
  $('#'+this.rel).addClass('filledselect');
});
</script>

优化现有代码的另一种方法：

$(['colour','task','shape','viot']).each(function() {
    $('#search'+this).addClass('filledselect');
});

Answer 3

您可以缓存列选择器，以便每次都不必找到DOM元素：

var $searchcolour = $("#searchcolour");
var $searchtask = $("#searchtask");
var $searchshape = $("#searchshape");
var $searchpivot = $("#searchpivot");

...
    $searchcolour.attr("class", "filledselect");
    $searchtaskattr("class", "filledselect");
    $searchshape.attr("class", "filledselect");
    $searchpivot.attr("class", "filledselect");

或者，不是选择每个列，而是只需在表中添加一组类。

请执行$（'＃id_for_table'）。attr（'class'，'highlight-c1 highlight-c3'）并将类c1，c2等添加到要突出显示的单元格中。然后有这样的CSS：

.hightlight-c1 .c1,
.hightlight-c2 .c2,
.hightlight-c3 .c3,
etc...                { ... }

或者您可以在下拉选项后命名它们，因此您只需向表中添加一个类，但要突出显示的单元格将为每个下拉列表提供应突出显示的类。

Internet Explorer中的jquery attr（）函数速度

3 个答案: