添加动态CSS类MVC剃刀视图

Question

我需要帮助来在MVC Razor视图标记中动态更改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>

我需要为连续行（即奇数和偶数）将类替换或注入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:even').addClass('widget-body-gray');
});

您还可以使用第nth-child选择器 ：

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

编辑如果需要添加多个类，只需相应地编辑addClass()函数。 从文档中： $( "p" ).addClass( "myClass yourClass" );

因此，在您的情况下：

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

Answer 2

尝试这个

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

参考选择奇/偶子div

Answer 3

试试这个

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

});

Answer 4

尝试这个 ：

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

演示版