javascript - jquery 将类添加到最近的父级

Question

我有一个表单，一些字段设置在 3 组可折叠的 div 中，我不想在验证之后如果任何字段有错误，父 div 会收到一个类来展开它。

<div class="panel-group" id="fields_panel">
  <div class="panel panel-primary">
    <div id="basic_info_fields" class="panel-collapse collapse in"> <!-- add class "in" -->>
      <div class="panel-body">
        <div class="row clearfix">
          <div class="col-md-12 m-b-0">
            <div class="form-group">
              <div class="form-line error"> <!-- if this div has "error" -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我还有两个具有相同结构的面板，每个面板都有几个字段，我试图找出是否有任何 form-line 有 error 并追加到 panel-collapse 父类 in 展开它。

现在我有以下 jquery 代码:

$(function () {
    var elem = $('.panel').find('.form-line');
    if (elem.hasClass('error')) {
        elem.closest('.panel-collapse').addClass('in');
    };
});

但是它将 in 类应用于所有 panel-collapse。我应该怎么做才能仅将其应用于具有该类的子元素的顶级父级，而不是所有父级？

Answer 1

您的 hasClass 将不起作用，因为 elem 是一组 jQuery 对象 - 不仅仅是一个。

为什么需要它 - 为什么不直接将类包含在选择器中:

$('.panel').find('.form-line.error').closest('.panel-collapse').addClass('in');

这也会阻止您循环遍历数组中没有类的元素，从而提高效率