Показать родительский DIV, если дочерние объекты имеют класс

Question

Я пытаюсь понять, почему это не работает. У меня есть div, который я бы хотел открыть, если у него есть один или несколько детей span с классом .reqiredError.

См JSFiddle

<div class="more-content" style="display:none;"> 
    <div class="col-xs-5 form-group"> 
     <label for="dua-status"> 
      Status: 
      <span class="required">*</span> 
      <span class="requiredError">Required Field</span> 
     </label> 
     <select id="dua-status"> 
      <option>Open</option> 
     </select> 
    </div> 
</div> 

$(document).ready(function() { 
    if ($('span').hasClass('requiredError')) { 
     $(this).closest().parent('div.more-content').fadeIn(0); 
    } 
}); 

Answer 1

Вы можете найти целевой элемент, то использовать. ближайший() найти целевой элемент предок

$(document).ready(function() { 
 
    $('.requiredError').closest('.more-content').fadeIn(0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="more-content" style="display:none;"> 
 
    <div class="col-xs-5 form-group"> 
 
    <label for="dua-status">Status: <span class="required">*</span> <span class="requiredError">Required Field</span> 
 
    </label> 
 
    <select id="dua-status"> 
 
     <option>Open</option> 
 
    </select> 
 
    </div> 
 
</div>

closest vs has

Answer 2

Вам не нужно if заявление.

Скорее, наведите их на селектор, используя :has(). Преимущество этого вы не должны перемещаться до родителей в зависимости от контекста будет родительский DIV, что имеет этих пролеты

$(document).ready(function() { 
 
     $('div.more-content:has(.requiredError)').fadeIn(0); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="more-content" style="display:none;"> 
 
    <div class="col-xs-5 form-group"> 
 
    <label for="dua-status">Status: <span class="required">*</span> <span class="requiredError">Required Field</span> 
 
    </label> 
 
    <select id="dua-status"> 
 
     <option>Open</option> 
 
    </select> 
 
    </div> 
 
</div>