定位下一个兄弟姐妹 child 以获得外部高度

Question

我想在下面的示例中获取 class .child 的高度值，然后使用警报显示该值以进行故障排除。

我有两个元素 .first 和 .second 是兄弟姐妹，.second 元素有一个 child 叫做 .child

HTML:

<div class="parent">

  <div class="first">Click Me</div>

  <div class="second">
    <div class="child"></div>
  </div>

</div>

CSS:

.first {
   width: 60px;
   padding: 8px;
   background: blue;
}

.child {
   height: 1234px;
}

jQuery:

$(".first").click(function() {

  var childHeight = $(this).next(".second > .child").outerHeight();

  alert(childHeight);

});

问题似乎是针对 child，如果我从我的 var 中删除 > .child 它 returns .second

的高度

这是一个 JS fiddle，代码相同：https://jsfiddle.net/CultureInspired/6dxLp86b/

Answer 1

您应该使用 .next(".second").find(".child") 来正确获取子元素。

这将获取下一个元素，然后在其中找到 .child 元素。

$(".first").click(function() {

  var childHeight = $(this).next(".second").find(".child").outerHeight();
  alert(childHeight);

});

.first {
  width: 60px;
  padding: 8px;
  background: blue;
}

.child {
  height: 1234px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">

  <div class="first">Click Me</div>

  <div class="second">
    <div class="child"></div>
  </div>

</div>

定位下一个兄弟姐妹 child 以获得外部高度

Target next siblings child to get outerheight

javascript

jquery

parent-child

next

siblings