Question

我正在制作一个函数，以将父DIV中设置的任何CSS值递归分配给所有嵌套子DIV。

因此，例如，如果顶部DIV的“边界半径”为“ 4px”，则该函数将递归遍历顶部DIV内的所有嵌套子代，并为给定标签复制相同的值。同时，受影响的元素将按时间顺序返回。因此，数组的第一项是找到的第一个子项，数组的最后一项是最深嵌套的最后一个子项。

但是这样做时会发生两个意外情况。

为什么Firefox为什么忽略填充更改，而Safari为何会更改填充？

为什么在最后一个对象中将顶部元素中设置为“ 100％”的高度更改为“ 142px”的绝对高度？

我在代码中放置了详细的注释，并使它逐步警告某些中间变量。右侧显示原始DIV树，在左侧显示已处理树。

下面的代码段最好在全屏模式下查看：

$(document).ready(function(){
var parent_id = '#top_div';

// now apply the padding to all siblings of top div
var result = recusiveCopyCSS($(parent_id),'padding');

// just to check if all nested divs were processed alert count
alert("Total nested DIVs found "+result.length);

// now set the border-radius progressively for all object in result
var radius = 0;
$(result).each(function(){ // for each object in result
  radius=radius+6;
  $(this).css('border-radius',radius+"px"); // apply calculated radius
});

var first_child = result.shift();
var last_child = result.pop();

// now set the height of first nested DIV
$(first_child).css('height','100%');

// now apply the height to all siblings of first child
var result = recusiveCopyCSS($(first_child),'height');

// now apply the box-sizing to all siblings in top div
var result = recusiveCopyCSS($(parent_id),'box-sizing');

// just to check if the deepest DIV received correct height, should be '100%'
alert("The deepest height is "+$(last_child).css('height'));

// now change the top padding and apply it again to all children
$(parent_id).css('padding','8px');
var result = recusiveCopyCSS($(parent_id),'padding');

// just to check if the deepest DIV received correct padding, should be '8px'
alert("The deepest padding is now "+$(last_child).css('padding'));


function recusiveCopyCSS(element,csstag){
	var array = []; // empty array for affected objects to be returned
	var cssval = element.css(csstag); // take the value of the parent from its css
	var children = element.children(); // look for all children of the parent
	  children.each(function(){ // for each child
		array.push($(this)); // add child to be returned
		$(this).css( csstag,cssval ); // apply parent's css value to the child
		var recurse = recusiveCopyCSS($(this),csstag); // look for more children inside child
		$.merge( array, recurse ); // merge children of child into affected objects
	  });
	return array; // returns affected objects as linear array
}
});

#top_div
{
  background-color: #3C0; 
  padding:4px; 
  box-sizing:border-box; 
  text-align:center;
}

#duplicate_div
{
  background-color: #3C0; 
  box-sizing:border-box; 
}

<script  type="text/javascript" src="//code.jquery.com/jquery-3.4.0.js"></script>


<div id="duplicate_div" style="width:150px; height:150px; float:right">
    top raw	
    <div id="sub_div_1" style="background-color: #CC0">
        level1
        <div id="sub_div_2" style="background-color: #FC3">
            level2
            <div id="sub_div_3" style="background-color: #3CC">
                level3
                <div id="sub_div_4" style="background-color: #FF0">
                    level4
                </div>
            </div>
        </div>
    </div>
</div>

<div id="top_div" style="width:150px; height:150px; float:left">
    top	processed
    <div id="sub_div_1" style="background-color: #CC0">
        level1
        <div id="sub_div_2" style="background-color: #FC3">
            level2
            <div id="sub_div_3" style="background-color: #3CC">
                level3
                <div id="sub_div_4" style="background-color: #FF0">
                    level4
                </div>
            </div>
        </div>
    </div>
</div>

预期结果是（A）所有嵌套的DIV都保持在父容器的高度之内并相对于其保持高度，（B）Firefox中的填充更改也发生了变化。

使jQuery将CSS变量应用于嵌套/递归对象？

0 个答案: