Добавить динамический CSS-класс MVC Razor View

Мне нужна помощь, чтобы динамически изменять 3 разметки в разметке представления MVC Razor. Разметка html приведена ниже

Странный

<li class="active">
  <div class="widget widget-heading-simple">
    <div class="widget-body">
      <div class="row"> 
        <div class="col-md-4 center">
          <a href="" class="thumb">
            <img src="/@item.image" class="img" alt="Image" />
          </a>
        </div>
        <div class="col-md-8 padding-none">
          <h5 class="strong text-uppercase">@item.title</h5>
          <div class="separator bottom">
          </div>
          <p>@Html.Raw(Html.Truncate(item.Text, 20, "...."))</p>
        </div>
      </div>
    </div>
  </li>

Четный

<li class="active">
  <div class="widget widget-heading-simple">
    <div class="widget-body">
      <div class="row"> 
        <div class="col-md-8 center">
          <a href="" class="thumb">
            <img src="/@item.image" class="img" alt="Image" />
          </a>
        </div>
        <div class="col-md-4 padding-none">
          <h5 class="strong text-uppercase">@item.title</h5>
          <div class="separator bottom">
          </div>
          <p>@Html.Raw(Html.Truncate(item.Text, 20, "...."))</p>
        </div>
      </div>
    </div>
  </li>

Мне нужно чередовать или вводить классы в div для последовательных строк (т.е. нечетных и четных)
например, для нечетной строки

<div class="widget widget-heading-simple widget-body-white "> ,<div class="col-md-4 center">  and <div class="col-md-8 padding-none">

Для четного ряда

<div class="widget widget-heading-simple  widget-body-gray">,<div class="col-md-8 center">  and <div class="col-md-4 padding-none">

Я пробовал jQuery, как показано ниже

<script type="text/javascript">
        $(document).ready(function () {
            $('.widget:first').addClass('widget-body-white');
            $('.widget:second').addClass('widget-body-gray');

        });
  </script>

Безрезультатно ничего не происходит, и я не знаю, как настроить требования col-md-4 или 8. Любая помощь будет оценена

$(document).ready(function () {
    $('.widget:odd').addClass('widget-body-white');
    $('.widget:odd').find('[class^=col-md]:first').attr('class','col-md-4 center');
    $('.widget:odd').find('[class^=col-md]:last').attr('class','col-md-8 padding-none');

    $('.widget:even').addClass('widget-body-gray');
    $('.widget:odd').find('[class^=col-md]:last').attr('class','col-md-4 center');
    $('.widget:odd').find('[class^=col-md]:first').attr('class','col-md-8 padding-none');
});

$('.widget:odd').addClass("widget-body-white")
$('.widget:even').addClass("widget-body-gray")

$(document).ready(function () {
    $('div.widget').filter(":odd").addClass('widget-body-white');
    $('div.widget').filter(":even").addClass('widget-body-gray');

});

$(document).ready(function () {
    $('.widget:odd').addClass('widget-body-white');
    $('.widget:even').addClass('widget-body-gray');
});

$('li.active:nth-child(odd)').addClass('widget-body-white');
$('li.active:nth-child(even)').addClass('widget-body-gray');

$(document).ready(function () {
    $('.widget:odd').addClass('widget-body-white  col-md-4 center');
    $('.widget:even').addClass('widget-body-gray  col-md-8 padding-none');
});