javascript - 如何创建交错的新闻线索？

Question

我在我的 Drupal 8 网站上创建了一个新闻源。如何在交错行中显示新闻线程？

我希望第一个在左边，干的在右边，其他人也一样。实际上，我添加了类 .right 来做到这一点并且它有效。

但是如何自动添加这个类(我有一百个 block 要在线程中显示)？

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
            <div class="col-md-12 timelines">
              <div class="main-timeline">
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-globe-americas"></i>
                  </div>
                  <div class="timeline-content">
                    <h3 class="title">Communautaire</h3>
                    <p class="description">
                    Grâce aux groupes et aux contenus que vous publierez dedans, vous pourrez rencontrer de nouvelles personnes partageant les mêmes centres d’intérêt que vous et y inviter vos amis. Vous pouvez aussi suivre des groupes et des boutiques.
                    </p>
                  </div>
                </div>
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-thumbs-up"></i>
                  </div>
                  <div class="timeline-content right">
                    <h3 class="title">Simple</h3>
                    <p class="description">
                    S1BIOSE est simple d'utilisation et accessible à tous. De plus il est en responsive design, c'est-à-dire qu'il s'adapte à tout type d'appareils (téléphones, tablettes, liseuses, ordinateurs et tv) et ses gros boutons le rendent utilisable sur écran tactile.
                    </p>
                  </div>
                </div>
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-cookie-bite"></i>
                  </div>
                  <div class="timeline-content">
                    <h3 class="title">Respectueux</h3>
                    <p class="description">
                    S1BIOSE est hébergé par une entreprise française sur des serveurs situés en France et est déclaré à la commission nationale de l'informatique et des libertés (CNIL). Vous pouvez supprimer votre compte utilisateur et vos publications à tout moment.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

CSS:

.main-timeline .timeline-content {
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.main-timeline .timeline-content:before {
    content: "";
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 45%;
    top: 20px;
}

.main-timeline .timeline-content.right {
    float: right;
}

.main-timeline .timeline-content.right:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

当我手动将 .right 类添加到 .timeline-content 时，它完美地工作:

现在，当我使用 Drupal 创建 View 时，如何将 .right 类自动添加到任何偶数行？

在我的JS文件中，我应该输入哪段代码来将.right类添加到偶数行？

  $('.timelines').on('even', function () {
       $('timeline-content').addClass('right');
  });

 $('.timeline:nth-child(even) .timeline-content').addClass('right');

.main-timeline {
    position: relative;
}

.main-timeline:before {
    z-index: -1;
    content: "";
    width: 3px;
    height: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
    position: absolute;
    top: 0;
    left: 49.9%;
}

.main-timeline .timeline {
    margin-top: 50px;
    position: relative;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

.main-timeline .timeline-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
    overflow: hidden;
    margin-left: -26px;
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
}

.main-timeline .timeline-icon img {
    width: 50px;
    height: 50px;
}

.main-timeline .timeline-content {
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.main-timeline .timeline-content:before {
    content: "";
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 45%;
    top: 20px;
}

.main-timeline .timeline-content.right {
    float: right;
}

.main-timeline .timeline-content.right:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

.timeline:nth-child(even) .timeline-content {
    float: right;
}

.timeline:nth-child(even) .timeline-content:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

.main-timeline .timeline-title {
    color: #000000;
    padding: 10px;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
    border-radius: 3px 3px 0 0;
    margin: -20px -20px 0px -20px;
}

.main-timeline .timeline-title h3 {
    font-size: 30px;
    font-weight: 300;
    margin-top: 0;
}

.main-timeline .timeline-title h6 {
    margin-bottom: 0;
}

.main-timeline .timeline-description {
    margin-top: 10px;
}

@media only screen and (max-width: 990px) {
    .main-timeline .timeline-title h3 {
        font-size: 25px;
    }
    .main-timeline .timeline-content::before {
        top: 16px;
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline {
        margin-left: 20px;
    }
    .main-timeline:before {
        left: 0;
    }
    .main-timeline .timeline-content {
        width: 90%;
        float: right;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content.right:before {
        left: 10%;
        right: inherit;
        margin-left: -6px;
        border-left: 0;
        border-right: 7px solid #ffffff;
    }
    .main-timeline .timeline-icon {
        left: 0;
    }
}

@media only screen and (max-width: 479px) {
    .main-timeline .timeline-content {
        width: 85%;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content.right:before {
        left: 15%;
    }
    .main-timeline .timeline-title h3 {
        font-size: 20px;
    }
    .main-timeline .timeline-content:before {
        top: 13px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
            <div class="col-md-12 timelines">
              <div class="main-timeline">
                <div class="views-element-container form-group"><div class="view view-timeline-public view-id-timeline_public view-display-id-block_1 js-view-dom-id-38d0b8b38b7d1f7be5c3ba53e63939fd9979deb1ce7bd918a170a79832785389">
  
    
      
      <div class="view-content">
      <div data-drupal-views-infinite-scroll-content-wrapper="" class="views-infinite-scroll-content-wrapper clearfix form-group">    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-56">test 56</a></h3>
         <h6>jeu, 06/09/2018 - 12:57</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-77">test 77</a></h3>
         <h6>jeu, 06/09/2018 - 12:56</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-55">test 55</a></h3>
         <h6>jeu, 06/09/2018 - 12:56</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-6">test 6</a></h3>
         <h6>jeu, 06/09/2018 - 12:08</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      [message:author:user_picture:thumbnail]
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/user/11569">test</a></h3>
         <h6>jeu, 06/09/2018 - 01:18</h6>
      </div>
      <p class="timeline-description">
         Vient de s'inscrire
      </p>
   </div>
</div>
</div>
</div>
</div>

    </div>
  
      
<ul class="js-pager__items pager" data-drupal-views-infinite-scroll-pager="">
  <li class="pager__item">
    <a class="button" href="/node?page=1" title="Aller à la page suivante" rel="next">Afficher plus</a>
  </li>
</ul>

          </div>
</div>

              </div>
            </div>
          </div>

Answer 1

为了能够将类添加到 View 的呈现 HTML 中，您必须使用自定义模板。

你可以通过复制默认的 twig 文件模板 core/themes/classy/templates/views/views-view-XXXX.html.twig 到您的主题文件夹并在那里更新代码。

参见 https://drupal.stackexchange.com/questions/203642/how-to-add-odd-or-even-class-in-each-row-of-a-views-table-output ，这样您就可以完全控制 Drupal View 的呈现。

如果您没有使用 Drupal 的经验并且根据您的 html 结构，您也可以使用 CSS 实现此目的:

.view-content .views-row:nth-child(even) .timeline .timeline-content {
       background: red;  // put here your 'right' properties.
}

通过使用 :nth-child()选择器，它接受可用于您的目的的 even 和 odd 值。

如果您确实需要将类添加到该特定元素，您可以像这样执行 jQuery:

 $('.view-content .views-row:nth-child(even) .timeline .timeline-content').addClass('right');

参见两种方法的代码笔，https://codepen.io/julia-cipriani-corvalan/pen/RYLPqy 使用 CSS 我将背景设置为红色，使用 JS 我添加了设置蓝色边框的正确类，两者都添加到 timeline-content 元素，甚至 timeline 父元素.

如果有帮助，请告诉我，