javascript - 如何将类添加到上面的第一个 div 中？

Question

我知道我可以通过不同的js来做到这一点，但在这种情况下它不是一个选项

jQuery(document).ready(function($){

  if($('.panel-default .panel-collapse').hasClass('in')) {
    $(this).prev('.panel-heading').addClass('show-in');
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">

  </div>
  <div id="collapseOne" class="panel-collapse collapse 
                               in">
    <div class="panel-body">
      <ul>
        <li></li>
      </ul>
    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">

  </div>
  <div id="collapseOne" class="panel-collapse collapse 
                               in">
    <div class="panel-body">
      <ul>
        <li></li>
      </ul>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">

  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
      <ul>
        <li></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您可以使用 CSS 伪选择器 :first-of-type 来定位系列中的第一个元素

示例:

.panel-default:first-of-type {
  background:red;
}

<div class="panel panel-default">1</div>
<div class="panel panel-default">2</div>
<div class="panel panel-default">3</div>
<div class="panel panel-default">4</div>
<div class="panel panel-default">5</div>