Javascript:为对象添加margin-top，对象与其他对象在对象A内部，页面上有多个对象A

Question

我有一个对象(div)，里面有四个元素(带有类)。

我想做的:当元素 A 的高度低于 40px 时，向元素 B 添加 20px margin-top。

但是页面上有很多对象。

<div class="list">
  <div class="block">
    <div class="list-name" style="height: 20px">element A</div>
    <div class="div1">another div here</div>
    <div class="div2">another div here</div>
    <div class="product-image-container">element B</div>
  </div>

  <div class="block">
    <div class="list-name" style="height: 50px">element A</div>
    <div class="div1">another div here</div>
    <div class="div2">another div here</div>
    <div class="product-image-container">element B</div>
  </div>

  (...)

</div>

到目前为止我已经尝试过了。然而，只有当 div 中只有两个元素时它才有效。

$(document).ready(function(){
    $('.list-name').each(function(index, obj){
    console.log($(obj).height())
    if($(obj).height() < 40)
    {
       $(obj).next('.product-image-container').css('margin-top', 20)
    }
    });


});

非常感谢任何帮助。

抢

Answer 1

next()仅适用于下一个元素。

使用 siblings() 相反，它包括同一级别的所有元素

$(obj).siblings('.product-image-container').css('margin-top', 20)

<小时/>

或者另一种常用的模式是查找共同的祖先和 find()在该父级内

$(obj).closest('.block').find('.product-image-container').css('margin-top', 20)