Jquery селекторы - фильтрация ASP.NET gridview

Question

У меня есть сетка и некоторые элементы управления флажками, с мыслью, что отображаются только строки с соответствующими флажками.

Я написал этот беспорядок в JQuery / javascript, который на самом деле работает, но оскорбляет мои глаза и работает ужасно. Существует ли более простой и / или более быстрый способ использования имен флажков для фильтрации по тексту столбца?

<script type="text/javascript">
    $(document).ready(function() {
    $('.Red input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Red')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Red')").parent().hide();
          }
      });
      $('.Green input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Green')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Green')").parent().hide();
          }
      });
      $('.Blue input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Blue')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Blue')").parent().hide();
          }
      });
  });
</script>

<span id="filtercheckboxes">
    <asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel"
        CssClass="RedLabel" />
    <asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel"
        CssClass="GreenLabel" />
    <asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel"
        CssClass="BlueLabel" />
</span>

Вывод HTML из сетки сетки ASP.NET выглядит следующим образом:

<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1">
    <table summary="" class="EntriesGrid">
        <thead>
            <tr class="headerrow">
                <th scope="col">header</th>
                <th scope="col">header</th>
                <th class="Colour" scope="col">header</th>
                <th scope="col">header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td class="Colour">Red</td>
                <td>data</td>
            </tr>
        </tbody>
    </table>
</div>

(Это значительно упрощено по сравнению с оригиналом, в надежде упростить его понимание. Фильтрация действительно работает и в оригинале, просто медленно и безобразно ...)

Answer 1

Одна вещь, которая замедляет его, это способ, которым вы определили свои селекторы:

$('.Blue input:checkbox')

Поскольку вы выполняете поиск по классу, jQuery в основном должен сначала просмотреть каждый элемент на странице. Однако если вы укажете идентификатор, jQuery может пропустить большую часть страницы и сосредоточиться на конкретном элементе DOM.

Так что лучшим селектором будет:

$('#ctl00_ContentPlaceHolder1_GridView1 .Blue input:checkbox')

Конечно, это проблема получения идентификатора элемента управления, но если JavaScript находится на той же странице, вы можете использовать что-то вроде этого:

$('#<% GridView1.ClientID %> .Blue input:checkbox')