动态附加 div 和 class

Question

我正在尝试在 mvc4 razor 中使用重复列表排列新闻项目，将每两篇文章包装在 div class "news-group clearfix" 中并添加一个 css 元素 "last"到第二篇文章class如下图。

<div id="main-content">

  <div class="news-group clearfix">
     <article class="news static-page">...</article>
     <article class="news static-page last">...</article>
     </div>

    **<div class="news-group clearfix">**
      <article class="news-container news static-page">...</article>
     <article class="news-container static-page **last**">...</article>
     **</div>**

    **<div class="news-group clearfix">**
      <article class="news-container news static-page">...</article>
     <article class="news-container static-page **last**">...</article>
     **</div>**
</div>

我已经能够使用下面的脚本添加 "last"

<script type="text/javascript">
$(document).ready(function () {
$('article.news-container:even').addClass('last');
});
</script>

我需要有关如何在 razor 视图的迭代中使用 <div class=news-group clearfix><div> 封装 2 篇文章的重复单元的帮助。任何帮助将不胜感激

Answer 1

你可能会做这样的事情

$('article.news-container:odd').each(function(){
       $(this).next().addBack().wrapAll("<div class="news-group clearfix"></div>");
});

Answer 2

JQUERY

$('.news-group.clearfix').append('<div>hello</div>').addClass('last');

**OR**

    $('.news-group.clearfix').addClass('last').append('<div>hello</div>');

动态附加 div 和 class

Append div and class dynamically

javascript

css

jquery

razor

asp.net-mvc-4