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 ...');

标签： javascriptjqueryhtmlcss

Answer 1

通过DOM 的高度 使用each和设置当前元素 ( this) 的样式.next

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