Функция jquery attr () в Internet Explorer

Question

У меня есть несколько раскрывающихся меню HTML, и затем, в зависимости от выбора, я выделяю соответствующий заголовок столбца в таблице. Я делаю это, изменяя класс css этого тега <td> следующим образом:

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

Подсвеченные заголовки столбцов зависят от того, какие из них были выбраны. Можно выбрать до 20 заголовков столбцов. Этот дополнительный код для подсветки помещает 1-2-секундную задержку на обновление моей страницы в IE (jquery также фильтрует результаты таблицы одновременно). Скорость в других браузерах нормальная.

Есть ли более быстрый способ достичь этого эффекта?

Answer 1

Это зависит от того, как вы сопоставляете выборки с ячейками таблицы. Но я уверен, что если вы будете использовать селекторы идентификаторов, подобные вашим примерам в качестве примера, это не займет 1-2 секунды, поэтому должно быть еще одно узкое место.

Почему бы вам не применить атрибут к каждому пункту меню, который соответствует идентификатору таблицы?

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

Вы можете кэшировать селекторы столбцов, чтобы не приходилось каждый раз находить элементы 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...                { ... }

В качестве альтернативы вы можете назвать их после выпадающих опций, так что вы добавляете только один класс в таблицу, но ячейки, которые будут выделены, будут иметь классы для каждого раскрывающегося списка, для которых они должны быть выделены.

Answer 3

Попробуйте это:

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