假设,作为练习,我们必须动态调整一个 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”的东西元素,以正确识别前一个元素。
最佳答案
您可以利用 .css()
可以传递函数这一事实:
$(".description").css("height", function() {
var element = this; // current "description" element
return $(element).prev(".pic").height() + "px";
});
回调函数中 this
的值依次是匹配选择器的每个元素 (".description"
)。
关于javascript - 在元素上加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54293075/