如果孩子跨班有父母DIV显示

Question

我想知道为什么这不起作用。我有一个div，如果我有一个或多个孩子的.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

你可以找到目标元素，然后使用父DIV。最接近（）找到目标祖先元素

$(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()来定位它们。这样做的好处是不必了导航到父为上下文将是具有那些跨度

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