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)

Javascript：向对象添加margin-top，其他对象的对象在对象A内，页面上有多个对象A.

1 个答案: