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

使用odd and even selectors：

进行尝试

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

您也可以使用nth-child selector：

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

参考Select odd/even child divs

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

<强> Demo

添加动态CSS类MVC Razor视图

4 个答案: