Question

我有一个场景，我希望找到具有某个类的所有元素，然后我想将父div的padding-bottom值设置为其当前填充底部值+的总和与选择器匹配的原始div的高度。

所以说我有这样的结构：

<div class='A'>
    <div class='B'>
        <div class='C'>
            .........
        </div>
        <div class='D'>
            .........
        </div>
    </div>
    <div class='B'>
        <div class='C'>
            .........
        </div>
    </div>
    <div class='B'>
        <div class='C'>
            .........
        </div>
    </div>
    <div class='B'>
        <div class='D'>
            .........
        </div>
    </div>
</div>

我想查找所有类 D 对象，然后我想将其容器类 B 的padding bottom值设置为高度class D 有问题的对象，加上 B 对象当前具有的填充底部值...

请注意，所有类 D 对象都有不同的高度..
每个班级 B 对象最多只能有1个班级 D 对象
每个班级 B 对象最多只能有1个班级 C 对象

上面我需要做什么jQuery？

Answer 1

试试这个：

$('.D').each(function(){
   $(this).parent().css("paddingBottom", "+=" + $(this).height() +"px");
});

Demo.

Answer 2

$(function(){
   $('div.D').each(function(index){
      var dHeight = $(this).height();
      var bPadding = $(this).parent().css('padding-bottom');
      var newPadding = parseInt(dHeight) + parseInt(bPadding);
      $(this).parent().css('padding-bottom', String(newPadding) + 'px');
   });
});

Answer 3

这应该是您所描述的问题的解决方案。但我认为你错过了一些细节。（此代码可能会缩短为一个班轮）

$(function() { 'use strict';
    $('.A > .D').each(function() {
        var $D = $(this);
        var $B = $D.closest('.B');

        $B.css('padding-bottom', 
            $D.height() + parseInt($B.css('padding-bottom'))
        );
    });
});

如果您想要包含 .C 元素的高度：

$(function() { 'use strict';
    $('.A > .D, .A > .C').each(function() {
        var $X = $(this);
        var $B = $X.closest('.B');

        $B.css('padding-bottom', 
            $X.height() + parseInt($B.css('padding-bottom'))
        );
    });
});

如何设置父级的高度，取决于所选元素的高度

3 个答案:

Demo.