jquery - 如何在添加/删除嵌套子项时在每个级别自动更改祖先高度

Question

在当前我正在处理的元素中，我需要能够使用 jQuery 动态添加多级可排序嵌套列表。我有嵌套的可排序列表按需要工作，但我遇到问题，即 parent 的下一个 sibling 在视觉上与前一个 parent sibling 的后代重叠，如 this fiddle 所示。

视觉上我需要每个列表项不与其兄弟元素的任何后代重叠，所以我的想法是我需要根据后代元素的累积高度设置高度/边距底部。

我对作品进行排序的唯一尝试是:

function resizeHeight(){
    var setToChildrenHeights = function(){
        var height = $(this).height();
        $(this).children().each(function(){
            height += $(this).outerHeight();
        });
        $(this).css('margin-bottom',height);
    }
    $("li").each(setToChildrenHeights);
}

问题是当我有 3 层嵌套列表时它不起作用(即父级被推出直接子级的方式但不超出子级的子级的方式。

作为引用，我使用的谷歌搜索的一个子集是:

• “jquery 如何在添加/删除嵌套子项时在每个级别自动更改祖先高度”
• “jquery parent height change as nested children added/deleted”
• “jquery 列表容器高度随着元素的添加而增加”
• “jquery 在添加子元素时动态改变 div 的高度”
• “当 child 动态添加/删除时 jquery 级联调整大小”
• “jquery 根据 child 的高度调整列表元素的高度”

除了搜索 jQuery api 文档，到目前为止我还没有找到解决方案，我希望另一双眼睛能够指出我的错误。感谢您的帮助。

更新:我很幸运地使用此代码(updated fiddle)采用了递归方法，但不幸的是，它现在设置了太多的边距底部:

function recursiveResize($parentElement){
    var numChild = $parentElement.children().length

    console.log('number of children = '+numChild);
    var parentHeight = $parentElement.height();
    if (numChild<1)
        return parentHeight;
    var height = 0;
    $parentElement.children().each(function(){
        height += recursiveResize($(this));
    });
    return parentHeight + height;    
}

//try2
function newResizeRecursive(){
    var $parentElements = $('li');

    $parentElements.each(function(){
        var height = $(this).height();
        var childrenHeights = recursiveResize($(this));
        var newmargin = childrenHeights - height +3
        console.log('new margin = '+newmargin);
        console.log('before '+$(this).css('margin-bottom'))
        $(this).css('margin-bottom', (newmargin>3 ? newmargin: 3))
        console.log('after '+$(this).css('margin-bottom'))
    });    
}

Answer 1

来自 this question我问过，我相信我们可以为您修改代码。不幸的是，你的 fiddle 只是让我感到困惑，所以我不会更新它。

每次附加一个元素时，您应该使用此函数返回的 maxHeight 调整父元素和父元素的父元素的大小:

var heightArray=$('#builder *').map(function(){
   return $(this).outerHeight();
}).get();

var maxHeight = Math.max.apply(Math, heightArray);

我认为您应该只需要为父元素的 id 切换 #builder。

在未来，使用 JSfiddle，您应该避免包含无关信息并保持代码简单。出于某些原因，您可能希望使用 javascript 附加按钮，但是在 jsfiddle 中，如果您只是使用了 HTML 区域，会更容易看到。