Question

如果某些条件为真，我想调整div的高度。具体来说，我想找到任何包含textarea的.element div，并且其中存在错误消息div。

$('.element').each(function() {
    if ( $(this).find('textarea') && $(this).find('.error-message') ) {
        $(this).css('min-height', '80px');
    }   
});

鉴于这种结构，只有中间div才能获得额外的高度：

<div class="element">
  <input type="text" />
</div>
<div class="element">
  <div class="error-message"></div>
  <textarea></textarea>
</div>
<div class="element">
  <input type="text" />
</div>

Answer 1

.length将是您的朋友：

$('.element').each(function() {
  if ($(this).find('textarea').length && $(this).find('.error-message').length) {
    $(this).css('min-height', '80px');
  }
});

div {
  border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
  <input type="text" />
</div>
<div class="element">
  <div class="error-message"></div>
  <textarea></textarea>
</div>
<div class="element">
  <input type="text" />
</div>

当您使用选择器找到合适的元素时，为了在if条件下测试它们，您需要使用.length来返回jQuery对象中的元素数。

Answer 2

你可以使用链接：这里有选择器：

 $('.element:has(.error-message):has(textarea)').css('min-height', '80px');

$('.element:has(.error-message):has(textarea)').css('min-height', '80px');

div {
  border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
  <input type="text" />
</div>
<div class="element">
  <div class="error-message"></div>
  <textarea></textarea>
</div>
<div class="element">
  <input type="text" />
</div>

Answer 3

您可以像这样验证错误消息类的长度：

var elem = $('.element');
if(elem.find('.error-message').length > 0) {
  // Code here
}

jQuery：查找包含特定元素的所有DIV

3 个答案: