How many instances of "'" are there in:
Q: Как поставить класс css по умолчению? Есть две кнопки - Таблица и Список. Нажимаю на Таблица - объекты выводятся таблицей. Нажимаю на Список - выводятся списком. 
Все это дело запоминается с помощью cookies.
Проблема в том, что когда cookies пусты, то объекты отображаются в виде таблицы (это правильно), но по умолчанию активная кнопка Список
Получается мне нужно сделать один лишний клик. т.е. нажать на Таблица, она станет активной, но ничего не изменится т.к. объекты отображаются уже таблицей. И только потом на Список
Нужно чтобы объекты отображались таблицей и кнопка Таблица тоже была активной (класс .active)
erb:
<ul class="nav">
  <li class="<%= 'active' if cookies['filter-product'] != 'buble' %>">
    <a class="nav-list" href="">item</a>
  </li>
  <li class="<%= 'active' if cookies['filter-product'] == 'buble' %>">
    <a class="nav-cols" href="">table</a>
  </li>
</ul>

<!-- container with items -->
<div class="infinite-table">
  <ul class="ctf--b-product-list <%= 'product-list-buble' unless cookies['filter-product'] == 'buble' %>">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

js:
$(document).ready(function(event){
    $('.nav a').click(function() {
    if (!($(this).parent().hasClass('active')))
    {
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
        if ($(this).hasClass('nav-cols'))
        {
          $.cookie('filter-product', 'buble');
          $('.ctf--b-product-list').addClass('product-list-buble');
        }
        else{
          $('.ctf--b-product-list').removeClass('product-list-buble');
          $.cookie('filter-product', 'non-buble');
        }
        return false;

    }
    else {
        return false;
    }
  });
});

css: (использую спрайты для кнопок Таблица и Список)
.nav { list-style:none; vertical-align:top; right:0; top:-50px; position:absolute; }
.nav li { float: left; padding:0 0 0 10px; }
.nav a { width:18px; height:18px; font-size:2em; line-height:0; display:block; }
.nav .active .nav-list { background-position:0 bottom; }
.nav .nav-cols { background-position:right 0; }
.nav .active .nav-cols { background-position:right bottom; }

или подскажите плагины для этих целей.
Заранее спасибо.

A: Наверное так, если нет элемента с классом active, применяем этот класс на родителя класса nav-cols:
Можно еще объявить переменную в erb со значением из кук, и проверять если она есть то делать active исходя из условий, а если ее нет вообще то ставить active по умолчанию
$(document).ready(function(event){
    if ( $('.active').length === 0 ) {
       $('.nav-cols').parent().addClass('active')
    }
    $('.nav a').click(function() {
    if (!($(this).parent().hasClass('active')))
    {
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
        if ($(this).hasClass('nav-cols'))
        {
          $.cookie('filter-product', 'buble');
          $('.ctf--b-product-list').addClass('product-list-buble');
        }
        else{
          $('.ctf--b-product-list').removeClass('product-list-buble');
          $.cookie('filter-product', 'non-buble');
        }
        return false;

    }
    else {
        return false;
    }
  });
});

<!-- container with items -->
<div class="infinite-table">
  <ul class="ctf--b-product-list <%= 'product-list-buble' unless cookies['filter-product'] == 'buble' %>">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>


user
I found 86 "'"s in the provided passage.
assistant