Question

如果.pst包含子类.pa，我想要增加'.pst'的高度，下面的代码不起作用，如果我使用this而不是.pst {1}}关键字所有带window.onload = function() { if($('.pst').contents().find('.pa').length !=0){ $(this).css('height','+=200px'); } } <div class="pst"> <div class="pa"></div> <div class="pa"></div> <div class="pa"></div> <div class="pa"></div> </div> <div class="pst"> <div class="pb"></div> <div class="pb"></div> <div class="pb"></div> <div class="pb"></div> </div>的div元素都会发生变化。救命！

dojo/request/xhr

Answer 1

您可以使用:has选择器简化它：

window.onload = function() {
    $('.pst:has(.pa)').css('height', '+=200px');
}

以上将仅选择并增加.pst个.pa后代的{{1}}的高度。

Answer 2

无需检查内容，只需使用$('.pst .pa')定位所需的课程组合。然后，您可以使用each()循环项目。

这是一个可运行的片段：

$(function() {
  $('.pst .pa').each(function() {
    $(this).css('height','+=200px');
 });
});

.pa {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
.pb {background-color: blue; margin: 5px; height:50px; width:50px; float:left}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pst">
 <div class="pa"></div>
 <div class="pa"></div>  
 <div class="pa"></div>  
 <div class="pa"></div>    
</div> 

<div class="pst">
 <div class="pb"></div>
 <div class="pb"></div>  
 <div class="pb"></div>  
 <div class="pb"></div>    
</div>

Answer 3

如果它包含子类，我希望 .pst的高度增加 .pa

您在if条件中使用$（this），该条件引用全局窗口对象而不是当前.pst元素。

考虑使用each：

$('.pst').each(function(){
  if($(this).find('.pa').length){
    $(this).css('height','+=200px');
  }
});

jquery - 更改包含特定子类

3 个答案: