jquery - 添加动态 CSS 类 MVC Razor View

Question

我需要帮助在 MVC Razor View 标记中动态更改 3 个标记。 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>

我需要为连续的行(即奇数和偶数)交替或注入(inject)类到 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 要求。 任何帮助将不胜感激

Answer 1

试试这个:

$(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');
});

Demo