jquery Klasse zum nächsten Elternteil hinzufügen

Question

Ich habe ein Formular, und einige der Felder sind in 3 Gruppen von reduzierbaren divs gesetzt, ich möchte nach der Validierung, dass wenn irgendein Feld Fehler hat, das Elternteil eine Klasse bekommt, um es zu entfalten.

<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> 

Ich habe zwei weitere Platten mit der gleichen Struktur, eine mit ein paar Feldern Eacho, ich versuche, wenn eine form-lineerror hat zu finden und die Klasse in zum panel-collapse Eltern hängen Sie ihn zu entfalten.

Im Moment habe ich den folgenden jQuery-Code:

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

Aber es die in Klasse für alle panel-collapse gilt. Was soll ich tun, um es nur auf die Top-Level-Eltern anzuwenden, die ein Child-Element mit dieser Klasse haben, und nicht für alle Eltern?

Answer 1

Ihre hasClass wird nicht funktionieren, wie elem ist ein Array von jQuery-Objekte - nicht nur eine.

Warum brauchen Sie es - warum nicht nur die Klasse in Ihrer Wähler sind:

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

Dies hält auch Sie durch Elemente im Array Looping, die nicht die Klasse hat somit die Verbesserung der Effizienz

Answer 2

Verwenden Code folgenden:

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

$(this) bezieht sich auf das angegebene Element, das die error Klasse.