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');

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

Answer 2

使用以下代码：

$('.panel').find('.form-line.error').each(function(){
    $(this).closest('.panel-collapse').addClass('in');
});

$(this)指的是具有error类的指定元素。

jquery将类添加到最近的父级

2 个答案: