javascript - 在元素上加载

Question

假设，作为练习，我们必须动态调整一个 div height 到前一个 div 之一。

我的问题是如何将它应用于元素的“onload”，以便让每个 div 的单独前一个元素......

假设代码

$(".description").css("height", 
                      $(".description").prev(".pic").height());

.pic {float: left; width: 50%; border: 1px solid red;}
.description {border: 1px dotted green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <figure>
    <div class="pic">pic1<br>this is a big pic</div>
    <div class="description">one is OK</div>
  </figure>
  <figure>
    <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div>
    <div class="description">two is NOK</div>
  </figure>
  <figure>
  etc...
  </figure>
</div>

可以看到，代码只对第一个description有效，第二个description仍然调整为第一个。

附言。

请不要建议重新格式化 HTML，我想知道如何为特定的 HTML 元素应用一些 JS 代码:类似在 div 上有“onload”的东西元素，以正确识别前一个元素。

Answer 1

您可以利用 .css() 可以传递函数这一事实:

$(".description").css("height", function() {
  var element = this; // current "description" element
  return $(element).prev(".pic").height() + "px";
});

回调函数中 this 的值依次是匹配选择器的每个元素 (".description")。