Объединение Rails и jQuery, CSS?

Question

Я пытаюсь научиться сочетать jQuery и Rails. У меня есть таблица, которую я создал с сопровождающим CSS. Я бы хотел, чтобы у каждого из них была первая, у которой не было этой границы. Я думал, что если бы я смог выбрать индекс [0] цикла и применить CSS с jQuery, это сработает, но я не был уверен, как это сделать. Можно ли отключить css для .details-row или добавить в другой класс, который имел бы border-top: transparent?

Любые объяснения или ресурсы были бы замечательными, спасибо.

• HTML

  <table> 
      <% details.each do |details| %> 
      <tr class='details-row'> 
       <td class='detail-title col-md-6 js-text-productSpec'><%= specification.name %></td> 
       <td class='detail-description col-md-6'><%= specification.description %> </td> 
      </tr> 
      <% end %> 
  </table> 
  

• CSS

  .details-row { 
      border-top: solid 1px #dedede; 
      td { 
      padding: 5px 0 5px 0; 
      } 
  } 
  

Я хотел бы таблицу выглядеть следующим образом:

Answer 1

Попробуйте следующее:

table { 
    border-collapse: collapse; /* to allow to put border in tr*/ 
    .details-row { 
    border-top: solid 1px #dedede; 
    td { 
     padding: 5px 0 5px 0; 
    } 
    &:first-child { border-top: none; } 
    } 
} 

чистая версия CSS:

table { border-collapse: collapse; } 
table .details-row { border-top: 1px solid #dedede; } 
table .details-row:first-child {border-top: none; } 
table .details-row td { padding: 5px 0 5px 0; } 

Также попробуйте удалить col-md-6 из класса тд, так как я думаю, что это от начальной загрузки и используется для чего-то другого

Этот это тест в скрипте: http://jsfiddle.net/7hj5jpk7/

Answer 2

Если вы используете jQuery, вы можете использовать $('tr:odd'), который выбирает все остальные <tr>. Поэтому, если вы хотите, чтобы .details-row применим только к [0], если это должен быть селектор :even. $('tr:even'), чтобы выбрать его

Ресурсы:

http://api.jquery.com/odd-selector/

http://api.jquery.com/even-selector/