我是编程新手。
我有多个同级div和一个view more按钮。我想在“查看更多”按钮上单击将类添加到div，但要逐个添加。所以第一个 sibling-div 将显示“查看更多”按钮。当用户第二次单击按钮时 sibling-div 应可见，然后再次单击第三个 sibling-div 应该是可见的等等。
我没有访问html的权限，所以我使用jquery添加了“查看更多”按钮。
默认情况下，我使用css隐藏了所有的兄弟div。只有第一组， view-more-btn 按钮，当有活动类时，它们将可见。
我尝试使用jquery添加类，但它会添加到所有div中。
这是html

<div class="parent-div">
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div view-more">
    <a class="view-more-btn">View More</a>
  </div>
</div>

这是我的css

.parent-div .sibling-div{
  display: none;
}
.parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more{
  display: block;
}

这是我的jquery

$(document).ready(function(){
  var view_more = '<div class="sibling-div view-more"><a class="view-more-btn">View more</a></div>';
  $(".parent-div .sibling-div:last-child").after(view_more);
  $(".parent-div .view-more-btn").click(function(){
    /*Adds class to all sibling divs*/
    $(".parent-div .sibling-div").addClass("active");
    /*Also tried*/
    $(".parent-div .sibling-div:first-child").next().addClass("active");
    /*But it only adds class to the second sibling*/
    /*Also tried using loop*/
    var div_length = $(".parent-div .sibling-div").length();
    for(i=0; i <= div_length; i++){
      $(".parent-div .sibling-div").addClass("active");
    }
  });
});

我尝试过所有这些方法，但都没有达到我想要的效果。它将类添加到所有 sibling-div ，或只是第二次 sibling-div