javascript - 如何使用 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 将样式设置为当前元素 (this) DOM 的高度

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