针对下一个兄弟姐妹孩子获得外部高度

时间:2018-03-02 16:00:12

标签: javascript jquery parent-child next siblings

我想在下面的示例中获取类.child的高度值,然后使用警报显示故障排除的值。

我有两个元素.first.second是兄弟姐妹,.second元素有一个名为.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);

});

问题似乎是针对孩子,如果我从我的var中移除> .child,则会返回.second的高度

这是一个JS小提琴,代码相同:https://jsfiddle.net/CultureInspired/6dxLp86b/

1 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#13;
$(".first").click(function() {

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

});
&#13;
.first {
  width: 60px;
  padding: 8px;
  background: blue;
}

.child {
  height: 1234px;
}
&#13;
<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>
&#13;
&#13;
&#13;