如何使用jQuery获取每个选择器的同级

Question

假设我有以下HTML：

<div class="parent">
  <div class="child"></div>
  <div class="sibling">content...</div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="sibling">different content...</div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="sibling">different content...</div>
</div>

如何设置每个孩子的身高作为同级内容的身高？

$('.child').css('height', '... next sibling height ...');

Answer 1

使用each样式并通过.next DOM的高度将样式设置为当前元素（ this ）

 $('.child').each(function() { $(this).css('height',$(this).next().height()); }); 

 .sibling{ height:15px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div class="sibling">different content...</div> </div> <div class="parent"> <div class="child"></div> <div class="sibling" style="height:55px;">different content...</div> </div> 

Answer 2

注意： -siblings（）用于获取匹配元素集中每个元素的同级 ，可选地由选择器过滤

 $('.child').each(function() { $(this).siblings().css({"background-color": "red", "height": "20px"}); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child">content...</div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child">content...</div> <div class="sibling">different content...</div> </div> <div class="parent"> <div class="child">content...</div> <div class="sibling">different content...</div> </div>