Javascript 如何将多个主干集合div合并为一个（修复HTML布局）

我正在处理主干集合视图。集合使用div显示为行。每行包含子视图（单元格）

我的问题是，我需要使它看起来好像只有一个集合，即单元格将合并到一个父div中。请参见下面的插图：

标记：

<div class="team-container container" data-view="Sports.View">
   <div class="team-row clearfix" data-view="Athletes.View">
      <div class="col-sm-8 team-row">
         <h1><a href="#">Surf</a></h1>
      </div>
      <div class="col-sm-8 team-cell">
         <div class="va-container-anchor">
            <div class="feat-image"><img src="http://us.billabong.sb1.sandbox.netsuitestaging.com/assets-bbg/images/content/laura-enever.jpg" alt="" class="fit-team-image"></div>
            <div class="va-container-hover">
               <a href="/team/laura-enever" data-hashtag="#team/laura-enever" class="holder">
                  <div class="content">
                     <div class="text"> Laura Enever </div>
                  </div>
               </a>
            </div>
            <div class="copy-block">
               <small>Pro Surf</small>
               <h2>Laura Enever</h2>
               <a class="btn btn-primary btn-lg btn-block" href="/team/laura-enever" data-hashtag="#team/laura-enever">Explore</a>
            </div>
         </div>
      </div>
      <div class="col-sm-8 team-cell">
         <div class="va-container-anchor">
            <div class="feat-image"><img src="/images/content/laura-enever.jpg" alt="" class="fit-team-image"></div>
            <div class="va-container-hover">
               <a href="/team/laura-enever-2" data-hashtag="#team/laura-enever-2" class="holder">
                  <div class="content">
                     <div class="text"> Laura Enever </div>
                  </div>
               </a>
            </div>
            <div class="copy-block">
               <small>Pro Surf</small>
               <h2>Laura Enever</h2>
               <a class="btn btn-primary btn-lg btn-block" href="/team/laura-enever-2" data-hashtag="#team/laura-enever-2">Explore</a>
            </div>
         </div>
      </div>
      <div class="col-sm-8 team-cell">
         <div class="va-container-anchor">
            <div class="feat-image"><img src="/images/content/courtney_conlogue_profile.jpg" alt="" class="fit-team-image"></div>
            <div class="va-container-hover">
               <a href="/team/courtney-conlogue" data-hashtag="#team/courtney-conlogue" class="holder">
                  <div class="content">
                     <div class="text"> Courtney Conlogue </div>
                  </div>
               </a>
            </div>
            <div class="copy-block">
               <small>Pro Surf</small>
               <h2>Courtney Conlogue</h2>
               <a class="btn btn-primary btn-lg btn-block" href="/team/courtney-conlogue" data-hashtag="#team/courtney-conlogue">Explore</a>
            </div>
         </div>
      </div>
   </div>
   <div class="team-row clearfix" data-view="Athletes.View">
      <div class="col-sm-8 team-row">
         <h1><a href="#">Snow</a></h1>
      </div>
      <div class="col-sm-8 team-cell">
         <div class="va-container-anchor">
            <div class="feat-image"><img src="/images/content/helen_profile.jpg" alt="" class="fit-team-image"></div>
            <div class="va-container-hover">
               <a href="/team/helen-schettini" data-hashtag="#team/helen-schettini" class="holder">
                  <div class="content">
                     <div class="text"> Helen Schettini </div>
                  </div>
               </a>
            </div>
            <div class="copy-block">
               <small>Pro Snow</small>
               <h2>Helen Schettini</h2>
               <a class="btn btn-primary btn-lg btn-block" href="/team/helen-schettini" data-hashtag="#team/helen-schettini">Explore</a>
            </div>
         </div>
      </div>
   </div>
</div>

专业冲浪
劳拉·埃内弗
专业冲浪
劳拉·埃内弗
专业冲浪
科特尼·康洛格
亲雪
海伦·舍蒂尼

---

任何帮助都将不胜感激。

这实际上是一个引导问题。你应该标记引导。。。顺便问一下，为什么会有重复标记？它不应该是动态生成的吗？你能把它简化成实际的东西吗？而且不清楚哪个是集合视图的标记，哪个是子视图的标记，集合视图模板是如何重复的等等。。。。